Question

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

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

如果我将图像漂浮在div中，那么我得到160 x 16像素的测量值（这是我原先预期的）。

我还在Chrome和IE浏览器中查看了这个页面并获得了相同的结果。所以我想这个行为必须在标准的某个地方描述？

我很好奇图像周围的额外空白区域来自何处？

（如果在其他地方已经回答道歉）

Answer 1

这听起来像是<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所示，有几种方法可以解决这个问题。

Answer 2

你的意思是底层空间？如果是这样，我在

回答了类似的问题

如果我们正在讨论其他问题，请通过向我们展示一些示例来更清楚地说明 http://jsfiddle.net