这些图像中的额外空间来自哪里？

Question

我有一个问题,我已经在各种浏览器中复制.

我在包装器http://jsfiddle.net/QnVYL/中有图像的div .包装器有1px边框和5px填充.内部图像的大小为100%宽度.

但是,出于某种原因,图像底部和包装底部之间的距离超过5像素.看看填充在图像的所有边上看起来是否相等？似乎在......某处添加了3个像素.Firebug不会让我知道从哪里来.

我该如何摆脱空间？我不能使用绝对定位来伪造填充,因为我还不确定我是否总是知道图像的确切高度.

非常感谢帮助!

Answer 1

这是一个众所周知的问题.尝试:

img {
    display: block;
}    

Answer 2

这是一个线高.默认情况下,图像呈现为内联块元素.行高确保后续文本不会像这里一样粘在图像上:

<img...><br>foo

这些修复都很有用,具体取决于具体情况:

.imgContainer { line-height: 0; }

img { display: block; }