Question

This question already has answers here:

How to remove the space between inline/inline-block elements? (41 answers)

Closed 8 years ago.

我有一个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）。我如何告诉浏览器在不放置>；并且<；直接挨着？我知道字母间距除了应用于浏览器决定使用的内容之外，所以即使是负值也没有用。基本上，我会选择推特在他们主页底部的东西。我查看了他们的代码，发现他们使用的是一个无序列表。我可以这么做，但我想从技术上解释一下为什么似乎没有办法消除这些图像之间的空白。

Answer 1

尝试添加＜code＞img｛margin:0；padding:0；float:left｝

换句话说，为img和float移除浏览器的任何默认边距以及填充。

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

Answer 2

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

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

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

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

从那时起，我对它进行了一些改进。

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

字母间距：-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 3

最简单的解决方案，不干扰布局并保留代码格式：

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

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

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

Answer 5

您还可以使所有锚点向左浮动，并将边距向左设置为-1

Answer 6

使用表格似乎是实现这一点的正确方法，因为单元格之间的空白没有影响。

Answer 7

如果您使用Apache提供页面服务，那么您可以使用Google PageSpeed模块。此选项可用于折叠空白：

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

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

关于如何删除CSS中的空白，请参阅此问题的答案：

忽略HTML中的空白

友情链接