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

Question

在所有主流浏览器中:正如问题所述,父<div>容器(其高度未设置)超出其高度以适合子<img>元素(例如,300像素高的图像是其中唯一的内容div).尺寸过大通常约为3到5个像素,并且首先出现,因为img margin-bottom或div padding-bottom可能看起来像.

但是,使用绝对定位,可以清楚地证明底部div位于底部下方img几个像素.它可能不会破坏网站的设计,但在某些情况下克服这个障碍.我在这里做了一个相当详细的小提示,展示了这个问题.

• 为什么这种标准做法适用于网络浏览器？
• 这是为了补偿某些东西吗？这似乎没必要.
• 这是一个错误,还是即将过时的功能？

编辑:感谢下面的回答/评论员,我知道原因是<img>默认情况下将a视为CSS display:inline,它保留了元素周围的空白.display:block通过消除元素周围的空白来更改它以完全解决问题.

注意:可以通过为image子元素赋予float:left或者float:right等的CSS属性来避免这种过大的规模,但这是一种解决方法,因此不是问题的答案.这可能有问题的一个原因是,如果你已经float在div子图像前面分层了其他元素(浮动重叠不允许Firefox,Opera,IE.float仅在Chrome和Safari中使用CSS position设置允许重叠).谢谢!

Answer 1

添加显示:阻止您的图像.我认为这将解决问题.