下面的html文档有两个div,一个带边框(id =’with’),另一个没有(id =’without).带边框的div(至少在firefox和chrome上)显着高于带边框的div.
我原本以为它们的高度最多只有2个像素,然而,警报告诉我它们的高度是19像素不同.
我无法弄清楚为什么会这样.
最佳答案
默认情况下,< h1> element有一个上边距和下边距和these margins are collapsed.有关于边距如何折叠(即合并)的规则.适用于您的示例的规则是：
原文链接：https://www.f2er.com/html/426422.htmlParent and first/last child
If there is no border,padding,inline content,or clearance to
separate the margin-top of a block with the margin-top of its first
child block,or no border,height,
min-height,or max-height to separate the margin-bottom of a block
with the margin-bottom of its last child,then those margins collapse.
The collapsed margin ends up outside the parent.
在您的示例中,规则可以理解为：
> div#without没有边框,其上边距(为0)与h1的上边距(约为20px)折叠.折叠的保证金最终在div之外.这意味着这些20px不会增加div的高度.
> div #with有一个边框,所以h1的上边距(~20px)在div内部渲染,比预期高20px.
