img元素周围的空间是从哪里来的？ [英] Where does the space around img elements originate?

问题描述

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

I needed to create an image sprite using ten 16px square transparent PNG files. So I put together a simple HTML page with my 10 images inside a div with a background colour. I added some simple CSS to make the div fit the content and remove padding, margins etc.

在Firefox使用Firebug我检查了div的宽度， 196 x 21像素。我可以清楚地看到图像之间的空白。就我可以告诉我没有边距，填充或边框。

In Firefox using Firebug I examined the width of the div and found it to measure 196 x 21 pixels. I can clearly see white space between the images. As far as I could tell I have no margins, padding or borders.

如果相反我浮动图像内的div，那么我得到一个160 x 16像素这是我最初期望的）。

If instead I float the images inside the div then I get a measurement of 160 x 16 pixels (which is what I expected originally).

我也看过这个页面在Chrome和IE和获得相同的结果。所以我想象的行为必须在标准的某处描述。

I have also looked at this page in Chrome and IE and get identical results. So I imagine the behaviour must be described in the standards somewhere?

我很好奇图像附近的白色空间的起源？

I'm curious as to where the additional white space around the image originates?

推荐答案

这听起来像是空格您的< img /> 标签。

This just sounds like white space between your <img /> tags.

如果您的HTML是：

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

然后你会得到你的图像之间的空格，

Then you will get spaces between your images the same as you would get space between your words if you wrote them on different lines.

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

If you wrote your HTML as follows:

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

图片之间没有空格。

这是 inline 和 inline-block 元素（ img 元素 inline-block ）。

要克服这一点，如Chris Coyer的文章战斗之间的空间内嵌块元素。

There are a few ways to get around this as shown in Chris Coyer's article Fighting the space between inline block elements.

这篇关于img元素周围的空间是从哪里来的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！