06月27, 2019

重读collapsed margin

问题背景

有个页面父元素的高度被子元素占据了,在页面的起始高度展示不对,导致设置了height: 100%之后,页面在没有占满的情况下还是出现了滚动条。 调试可看到dom结构如下:

父元素:

父元素

子元素:

子元素

分析

可以看到是父子元素的边距塌陷(collapsed margins)。一般常见的间距塌陷我们讲的兄弟节点的情况较多。父子节点的边距塌陷定义可在W3C规范中看到。

规范

解决方案

对于这种第一个子元素与父元素margin合并的情况,可以通过下面的方式解决,供参考:

  1. 父元素设置overflow: auto / hidden; // 形成BFC
  2. 父元素设置padding: 1px; // 有padding值

参考

  1. https://css-tricks.com/what-you-should-know-about-collapsing-margins/
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
  3. https://drafts.csswg.org/css2/box.html#x27

本文链接:http://fengbaiyang.cn/post/collapsed-margin.html

-- EOF --

Comments

暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~