当 img 不是块元素时，包装器的额外高度？答案

【问题标题】：Extra height on wrapper when img is not a block element?当 img 不是块元素时，包装器的额外高度？
【发布时间】：2013-11-29 12:22:22
【问题描述】：

我以为我了解内联元素和块元素的工作原理，但这让我很困惑。我找到了解决此问题的方法，但是 我不知道它为什么会起作用。

由于某种原因，如果您在 div 中有一个 img，则 div 就像 3.5px 比图像高。但是，如果您将图像设置为块元素，这个额外的高度就会消失。

基本 HTML：

<div id="wrapper">
        <img src="http://www.basini.com/wp-content/uploads/2013/02/seeing-in-the-dark.jpg" width="300" height="230"  />
</div>

还有 CSS：

#wrapper {
    background: orange;
}
#wrapper img {
    /* display: block; this will remove the extra height */
}

为什么会发生这种情况以及为什么将“img”设置为块元素来解决它？还有其他解决方案吗？

【问题讨论】：

标签： html css

【解决方案1】：

默认情况下，图像是内联渲染的，就像一个字母。

它与 a、b、c 和 d 位于同一行。

该行下方有空间用于您在 j、p 和 q 等字母上找到的下行字母。

您可以调整图像的垂直对齐以将其定位到其他位置。

【讨论】：

【解决方案2】：

这是由于img 标记的包装div 的line-height。

要修复它，您可以将line-height:0 设置为div，float 设置为img 或display:block 设置为img。

【讨论】：

【解决方案3】：

你试过reset all styles吗？在应用新样式之前？

【讨论】：