为什么块级元素高于它包含的图像？

Question

如果没有高度规格，只包含单个图像的<div>（或<p>或任何其他类似元素）会比它高一点。看起来它在Firefox中高4px，在Chrome中高出5px（根据Firebug及其等效的Chrome）。额外的空间将添加到图像下方。

显然我可以通过为div指定一个高度来解决这个问题，但是我想知道为什么那个空间存在，并且有一种消除它的方法。

Answer 1

Image是内联级元素，因此它遵循行高设置，默认情况下将其设置为文本的基线。

如果您将图像设置为vertical-align: bottom，它会将图像定位在下降线（文本行的最底部）

另一种选择是将图像设置为display: block并跳过所有这些内联噱头

Answer 2

添加到CSS：

img {display: block;}

默认情况下img有display:inline因此所有与文字行相关的内容。

Answer 3

将line-height: 0px;添加到包含元素。

将img设置为display:block也有效，但如果您隐藏并使用display:none / display:inline隐藏并显示图片，则可能会中断。