如何消除CSS中内联元素之间的间距？

Question

我有一个带有一堆图像标签的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>

因为标签之间有空格,浏览器会在图像之间显示一些空格(Chrome决定4px).我如何告诉浏览器在图像之间没有任何空格,而不是将<和<直接放在一起？我知道除了浏览器决定使用的字母间距外,字母间距也适用,所以即使是负值也没用.基本上我会在他们的主页底部找到像Twitter这样的东西.我查看了他们的代码,他们正在使用无序列表.我可以这样做,但我想要技术解释为什么似乎没有办法消除这些图像之间的空白区域.

Answer 1

如果您出于某种原因想要这样做:

• 不使用floats,和;
• 没有折叠HTML中的空白(这是最简单的解决方案,以及它的价值,Twitter正在做什么)

您可以使用此处的解决方案:

如何删除内联块元素之间的空格？

从那以后我稍微改进了一下.

请参阅: http ://jsfiddle.net/JVd7G/

letter-spacing: -1px 是修复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>

Answer 2

最简单的解决方案,不会破坏布局并保留代码格式:

<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>

Answer 3

尝试添加 img {margin:0;padding:0;float:left}

换句话说,删除任何默认margin和padding浏览器img和float它们.

演示:http://jsfiddle.net/PZPbJ/