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

概述在所有主流浏览器中：正如问题所述,父母< div>容器(其高度未设置)超出其高度以适合儿童< img>元素(例如,一个300像素高的图像,这是div中唯一的东西).尺寸过大通常约为3到5个像素,并且首先显示为img margin-bottom或div padding-bottom. 但是,使用绝对定位,可以清楚地证明div的底部低于imgby几个像素的底部.它可能不会破坏网站的设计,但在某些情况下 在所有主流浏览器中：正如问题所述,父母< div>容器(其高度未设置)超出其高度以适合儿童< img>元素(例如,一个300像素高的图像,这是div中唯一的东西).尺寸过大通常约为3到5个像素,并且首先显示为img margin-bottom或div padding-bottom.

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

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

EDIT: Thanks to the answerers/commentators below,I kNow the reason is that an <img> is treated by default as CSS
display:inline which preserves whitespace around the element.
Changing it to display:block completely fixes the problem by
eliminating whitespace around the element.

注意：可以通过为image子元素赋予float属性：left或float：right等CSS属性来避免这种过度调整,但这是一种解决方法,因此不是问题的答案.这可能有问题的一个原因是,如果你已经在div子图像前面放置了其他浮动元素(浮动重叠不允许firefox,Opera,IE.浮动重叠似乎只允许使用CSS位置设置在Chrome和Safari中).谢谢！

解决方法 添加显示：阻止您的图像.我认为这将解决问题. 总结

以上是内存溢出为你收集整理的html – 父div,高度未设置,超高几个像素的高度以适合子img元素高度？为什么？全部内容，希望文章能够帮你解决html – 父div,高度未设置,超高几个像素的高度以适合子img元素高度？为什么？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。