图像没有正确推动父div的高度

Question

我希望父div成为子图像的高度，如下所示：

<div class="container one">
    <img src="http://placehold.it/250x250" />
</div>

div应该正好是250px高。对于插图，我创建了一个 JSFiddle here。

现在在FF和Chrome中实际发生的事情是div只有一点更高，可能是3到5个像素。

我希望避免使用不必要的纯化妆品标记（如

）进行嵌套

<div class="container one">
    <div class="inner">
        <img src="http://placehold.it/250x250" />
    </div>
</div>

或类似。

我觉得这非常明显，但我对它没有任何意义。

Answer 1

<img>是一个内联元素，由于这一事实，会在下面添加额外的空格。用

修复它

img {
  display: block
}