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

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; }

Answer 3

如果添加img {display:block}

，则无额外间距

http://jsfiddle.net/lexy0202/uxMu9/2

Answer 4

就像我猜测它是显示属性：

#container {
    display:block;
    width: 50%;
    margin: auto;
    margin-top: 100px;
}