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

【问题标题】：Where's the extra space coming from in these images?这些图像中的额外空间来自哪里？
【发布时间】：2012-02-17 11:05:06
【问题描述】：

我有一个问题，我已经在各种浏览器中复制过。

我在包装器http://jsfiddle.net/QnVYL/ 中有包含图像的 div。包装器具有 1 像素的边框和 5 像素的内边距。里面的图片大小为 100% 宽度。

不过，由于某种原因，图像底部与其包装器底部之间的距离超过了 5 像素。看看图像的所有边上的填充是如何相等的？似乎从……某处添加了 3 个像素。 Firebug 不让我知道从哪里来。

我怎样才能摆脱空间？我不能使用绝对定位来伪造填充，因为我还不确定我是否总是知道图像的确切高度。

非常感谢您的帮助！

【问题讨论】：

标签： html css

【解决方案1】：

这是一个已知问题。试试：

img {
    display: block;
}

【讨论】：

啊哈！当图像内联时，div 会包裹文本行的基线！ Eric Meyer 在这里写到：devedge-temp.mozilla.org/viewsource/2002/img-table

【解决方案2】：

这是一个行高。默认情况下，图像被渲染为内联块元素。 line-height 确保以下文本不会像这里那样粘在图像上：

<img...><br>foo

这两个修复都很有用，具体取决于具体情况：

.imgContainer { line-height: 0; }

img { display: block; }

【讨论】：

感谢您提供替代解决方案。但是什么时候 line-height 0 更适合我呢？某些浏览器是否对阻止图像或其他东西表现得很奇怪？
在你的特殊情况下，我想这真的没有太大的区别。但是假设您想添加更多内容，例如一些文本或其他图像，那么 line-height 可能会变得有用。请参阅此示例：jsfiddle.net/mDP85

【解决方案3】：

如果添加img {display:block}，则无需额外的间距

【讨论】：

【解决方案4】：

我猜是显示属性：

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

【讨论】：