父级div，高度未设置，超过几个像素的高度以适合子img元素高度？为什么？

Question

在所有主流浏览器中：正如问题所述，父<div>容器（其高度未设置）超出其高度以适合子<img>元素（例如，div内唯一的300像素高的图像。尺寸过大通常约为3到5个像素，并且首先显示为img margin-bottom或div padding-bottom。

然而，使用绝对定位，可以清楚地证明div的底部低于img的底部几个像素。它可能不会破坏网站的设计，但在某些情况下克服这个障碍。的 I have made a fairly detailed fiddle demonstrating this issue here

• 为什么这种标准做法适用于网络浏览器？
• 这是否意味着要弥补某些事情？这似乎没必要。
• 这是一个错误，还是即将过时的功能？

  

编辑：感谢下面的回答/评论员，我知道原因是<img>默认被视为CSS   保留元素周围空白的display:inline。   将其更改为display:block可以完全解决问题   消除元素周围的空白。

注意：可以通过为image子元素提供float:left或float:right等CSS属性来避免这种过大的问题，但这是一个解决方法，因此不问题的答案。这可能有问题的一个原因是，如果您已经在div子图像前面分层了其他float个元素（浮动重叠不允许Firefox，Opera，IE。float重叠似乎只允许在Chrome和Safari中使用使用CSS position设置）。 谢谢！的

Answer 1

为图片添加display：block。我认为这样可以解决问题。