html - img 元素周围的空间从何而来？

Question

我需要使用十个 16 像素方形透明 PNG 文件创建图像精灵。因此，我将一个简单的 HTML 页面与我的 10 个图像放在一个带有背景颜色的 div 中。我添加了一些简单的 CSS 以使 div 适合内容并删除填充、边距等。

在使用 Firebug 的 Firefox 中，我检查了 div 的宽度，发现它的尺寸为 196 x 21 像素。我可以清楚地看到图像之间的空白。据我所知，我没有边距、填充或边框。

相反，如果我将图像浮动在 div 内，那么我会得到 160 x 16 像素的测量值（这是我最初的预期）。

我也在 Chrome 和 IE 中查看了这个页面并得到了相同的结果。所以我想行为必须在某处的标准中描述？

我很好奇图像周围的额外空白来自哪里？

（抱歉，如果这已在其他地方得到回答）

score 2 · Accepted Answer

<img />这听起来就像您的标签之间的空白。

如果您的 HTML 是：

<img src="/path/to/image/1.png" />
<img src="/path/to/image/2.png" />
<img src="/path/to/image/3.png" />

然后你会得到你的图像之间的空格，就像你在不同的行上写它们时你的单词之间的空格一样。

如果您按如下方式编写 HTML：

<img src="/path/to/image/1.png" /><img src="/path/to/image/2.png" />

这样图像之间就没有空白了。

这是inline和inline-block元素（img元素是inline-block）的“预期”行为。

有几种方法可以解决这个问题，如 Chris Coyer 的文章Fighting the space between inline block elements所示。

score 0 · Accepted Answer

你是说底部空间吗？如果是这样，我有一个类似问题的答案

2 回答 2