html - 图像未正确插入父 div 的高度

<分区>

我希望父级 div 是子图像的高度，如下所示:

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

div 的高度应恰好为 250 像素。对于插图，我创建了一个 JSFiddle here .

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

我想避免使用不必要的纯装饰性标记进行嵌套

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

或类似的。

我觉得这非常明显，但我就是无法理解它。

最佳答案

<img>是一个内联元素，并因此在下方添加了额外的空间。修复它

img {
  display: block
}

关于html - 图像未正确插入父 div 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26444010/

相关文章：

javascript - 关闭弹出窗口后，模态弹出背景淡入淡出仍然出现