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

Question

我以为我了解内联元素和 block 元素的工作原理，但这让我很吃惊。我已经找到了该问题的修复方法，但是我不知道它为什么有效。

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

基本 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 */
}

我已经设置了一个 jsfiddle to demonstrate the effect

为什么会发生这种情况，为什么将“img”设为 block 元素可以解决这个问题？还有其他解决方案吗？

Answer 1

默认情况下，图像以内联方式呈现，就像字母一样。

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

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

您可以调整图像的垂直对齐方式以将其放置在其他位置。