如何在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主页底部的样式。我看了他们的代码，他们使用了一个无序列表。我可以这么做，但我想知道为什么似乎没有办法消除这些图片之间的空格的技术解释。

- Jake Petroules

---

如果我可以问一下：“为什么不能将 > 和 < 直接相邻放置”，这有什么问题吗？ - DanMan

@DanMan：我认为他只是想要一个不涉及更改HTML的解决方案。 - thirtydot

Answer 1

如果出于某种原因，您希望这样做：

• 不使用float;
• 不去除 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>

- thirtydot

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>

- ThinkingStiff

---

这似乎是最好的解决方案。不会干扰，也不需要玩样式或其他任何东西。我遇到了类似的问题，在<input>和<img>标签之间添加注释，以便图像不会堆叠。 - Ross

是的，是的，再说一千遍是的。在我看来，这应该是此帖中获得最高评分的答案（当然，并不是其他答案不好，而且为了记录，OP确实声明“仅使用CSS”），但对于我们这些只要能完成任务就行（并且保持HTML的可读性，毕竟这就是大多数人不想将它们全部折叠成一条长长的行的原因）的人来说，这个解决方案是最简单、最不具侵入性的，并完美地保留了可读性。好答案，正是我在寻找的！ - VoidKing

一个不错的东西，但很遗憾它必须是这样。 - Daniel F

我喜欢注释行延续，虽然使用普通的延续也可以产生同样的效果，但牺牲可读性。在我看来，这样保留更多的可读性，我得试一下 :) - Derek Litz

我们使用了这个解决方案，几周后间隔又出现了，我们发现是意外的代码格式化破坏了它。因此，在使用时要小心。 - user247702

Answer 3

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

换句话说，删除浏览器对于img标签的默认margin和padding属性，并将它们float。

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

- Sotiris

Answer 4

间距会导致图像移动，因为它们是内联元素。如果您想让它们堆叠起来，可以使用无序列表（如 Twitter 所示），这将使每个图像位于块元素内。

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

- Adam Hutchinson

---

@Jake 如果你的布局允许的话，你也可以使用浮动。在图片上添加 float: left 可以消除间距并将它们聚集在一起；你只需要清除任何你想要出现在它们下方的内容即可。（请参见 http://jsfiddle.net/sqASF/1/ 作为示例。） - Matt Gibson

Answer 5

你也可以将所有锚点都设置为float-left，并将margin-left设置为-1

- Cata

Answer 6

看起来使用表格是解决这个问题的正确方法，因为单元格之间的空格没有影响。

- Daniel F

---

为什么要踩？如果每个<a...>都被包含在<tr><td>中，并且将div替换为table，只要cellspacing和cellpadding设置为0，就不会有任何div之间的空格。 - Daniel F

投下负评是因为你不应该使用表格来解决布局问题。 - user247702

有趣的语句，给它点赞。 - Daniel F

Answer 7

如果您正在使用Apache提供页面，则可以使用Google PageSpeed模块。它具有可用于折叠空格的选项：

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

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

此外，有关如何在CSS中删除空格的答案，请参见此问题中的答案：

忽略HTML中的空格

- ʍǝɥʇɐɯ

Answer 8

在你的标签中添加style="display:block"。

- G. Arico