问题背景
有个页面父元素的高度被子元素占据了，在页面的起始高度展示不对，导致设置了height: 100%之后，页面在没有占满的情况下还是出现了滚动条。
调试可看到dom结构如下：
父元素：
子元素：
分析
可以看到是父子元素的边距塌陷(collapsed margins)。一般常见的间距塌陷我们讲的兄弟节点的情况较多。父子节点的边距塌陷定义可在W3C规范中看到。
解决方案
对于这种第一个子元素与父元素margin合并的情况，可以通过下面的方式解决，供参考：
- 父元素设置overflow: auto / hidden; // 形成BFC
- 父元素设置padding: 1px; // 有padding值
参考
- https://css-tricks.com/what-you-should-know-about-collapsing-margins/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
- https://drafts.csswg.org/css2/box.html#x27
作者
admin
发表于
2019-06-27 17:13:12
，添加在分类
css
下
，并被添加「
css
margin
collapse
」标签
，最后修改于
2019-07-09 20:36:37
本博客来自【白杨的博客】， 转载请注明出处，谢谢合作~
Comments
暂不支持评论，如有问题，请发邮件至baiyang.feng@outlook.com。 望不吝赐教~