32

我有一个 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 的东西。我查看了他们的代码，他们使用的是无序列表。我可以这样做，但我想要技术解释为什么似乎无法消除这些图像之间的空白。

4

8 回答 8

27

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

  • 不使用floats, and;
  • 不折叠 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>
于 2011-06-02T11:14:37.513 回答
25

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

<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>
于 2013-01-29T02:28:59.577 回答
14

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

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

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

于 2011-06-02T10:39:54.833 回答
2

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

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

于 2011-06-02T10:35:59.923 回答
0

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

于 2011-06-02T10:40:01.527 回答
0

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

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

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

另请参阅此问题中有关如何删除 CSS 中的空格的答案：

忽略 HTML 中的空格

于 2011-06-02T10:42:31.120 回答
0

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

于 2013-05-22T14:06:24.233 回答
-3

添加style="display:block"到您的img标签。

于 2013-09-04T03:25:13.893 回答