浮动容器内的图像:底部的奇数空白

Question

可能重复:
html,css - 图片下方奇怪的隐形边距

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

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

然而,容器总是比它里面的图像高几个像素,这是相当丑陋的,你可以在这个小提琴中看到.当然,粉红色区域有点夸张,但它清楚地表明了问题.

有办法避免这种情况吗？即如果除了容器中的图像之外什么也没有,它应该在图像下方没有任何空白.填充和边距已经为零,因此不是导致问题的原因.

Answer 1

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

设置图像display: block将解决您的问题虽然上述文章是一个很好的阅读.