下面的html文档有两个div,一个带边框(id =’with’),另一个没有(id =’without).带边框的div(至少在firefox和chrome上)显着高于带边框的div.
我原本以为它们的高度最多只有2个像素,然而,警报告诉我它们的高度是19像素不同.
我无法弄清楚为什么会这样.
Parent 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.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。