html - 为什么父高度与内部图像高度不同？

Question

我已经在 css 上工作了一段时间，但我很困惑为什么父高度与内部图像高度不同，给定以下代码。

<div style="width:200px">
    <img style="max-width:100%;" src="http://localhost:8888/example/06f1e47fbdb03e48203ebfba/66932afa697bdbc76a1a291e/thumb_d90ab4a531969620e2c2a160.jpg">
</div>

我期望父 div 会随着不同的图像相应地扩展。事实是里面的图片是200*200，外面的div是200*206，我不知道多出的6个像素是从哪里来的。 外部 div 有填充或内部图像有边距。有人可以解释为什么会这样吗？

Answer 1

是否this为您解决问题？如果不是，您使用的是什么浏览器和操作系统？

我以前遇到过这个。问题是图像在默认情况下是 display: inline-block，这导致它们表现得像文本(例如，遵循文本基线)。如果我们不希望这种情况发生，我们可以将显示更改为 display: block。