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

Question

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

出于某种原因，如果你有一个img内部 a div，那么 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”作为块元素来解决它？还有其他解决方案吗？

score 10 · Accepted Answer

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

它与 a、b、c 和 d 位于同一条线上。

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

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

score 2 · Accepted Answer

这是由于标签line-height的包装。divimg

要修复它，您可以设置line-height:0为 div、floatimg 或display:blockimg。

score 0 · Accepted Answer

0

您是否尝试过重置所有样式？在应用新样式之前？

于 2013-03-12T09:06:09.970 回答

3 回答 3