html - 浮动容器内的图像：底部的奇数空格

Question

可能重复：
html、css - 图片下方奇怪的不可见边距

我在浮动的 div 容器中有一个图像：

<div><img src="..." /></div>

然而，容器总是比它里面的图像高几个像素，正如你在这个 fiddle 中看到的那样，这相当难看。当然，粉红色区域有点夸张，但它清楚地表明了问题。

有没有办法避免这种情况？即，如果容器中只有图像，则图像下方不应有任何空白。填充和边距已经为零，所以这不是问题的原因。

Answer 1

查看MDN 上的图像、表格和神秘差距。图像是内联的并且位于基线上。下面的空间是为文本中的下降者保留的。

将图像设置为display: block将解决您的问题，尽管上述文章是一本不错的读物。

Answer 2

这对我有用。

img { vertical-align: top; }