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）。如何在不放置＆gt;的情况下告诉浏览器在图像之间不显示任何空格。和＆lt;直接相邻？我知道除了浏览器决定使用的字母间距外，字母间距也适用，所以即使是负值也没用。基本上我会在他们的主页底部找到像Twitter这样的东西。我查看了他们的代码，他们正在使用无序列表。我可以这样做，但我想要技术解释为什么似乎没有办法消除这些图像之间的空白区域。

Answer 1

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

不使用float s和;
没有折叠HTML中的空白（这是最简单的解决方案，以及它的价值，Twitter正在做什么）

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

How to remove the space between inline-block elements?

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

请参阅： 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/

Answer 4

间距会导致图像移动，因为它们是内联元素。如果你想让它们叠加起来，你可以使用无序列表（就像twitter那样），因为这会将每个图像放在一个块元素中。

内联元素与文本一起显示。

Answer 5

您还可以将所有锚点设置为浮动左侧并将margin-left设置为-1

Answer 6

如果您使用Apache为您的网页提供服务，那么您可以使用Google PageSpeed模块。这有可用于折叠空格的选项：

http://code.google.com/speed/page-speed/docs/filter-whitespace-collapse.html

您不必使用PageSpeed的更“危险”选项。

另请参阅此问题中的答案，了解如何删除CSS中的空格：

Ignore whitespace in HTML

Answer 7

看起来使用表是正确的方法，因为空格在单元格之间没有影响。

Answer 8

将style="display:block"添加到您的img代码中。

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

8 个答案: