How can I eliminate spacing between inline elements in CSS?

This question already has an answer here:

How do I remove the space between inline-block elements? 32 answers

---

try to add img {margin:0;padding:0;float:left}

in other words remove any default margin and padding of browsers for img and float them.

Demo: http://jsfiddle.net/PZPbJ/

---

If you for some reason want to do it:

without using float s, and;

without collapsing the whitespace in your HTML (which is the easiest solution, and for what it's worth, what Twitter is doing)

You can use the solution from here:

How to remove the space between inline-block elements?

I've refined it slightly since then.

See: http://jsfiddle.net/JVd7G/

letter-spacing: -1px is to fix Safari.

div {
    font-size: 0;
    letter-spacing: -1px
}

<div style="margin: 0; padding: 0; border: 0;">
    <a href="/view/foo1"><img src="http://dummyimage.com/64x64/444/fff" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="http://dummyimage.com/64x68/888/fff" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="http://dummyimage.com/64x72/bbb/fff" alt="Foo3" /></a>
</div>

---

最简单的解决方案不会妨碍布局并保留代码格式：

<div style="margin: 0; padding: 0; border: 0;">
       <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a><!--
    --><a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a><!--
    --><a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>

链接地址: http://www.djcxy.com/p/89266.html

上一篇: 如何摆脱CSS水平列表项目之间的空白？

下一篇: 我如何消除CSS中内联元素之间的间距？