Fe-interview: [css] 第157天 外边距重叠是什么？重叠的结果是什么？怎么防止外边距重叠？

[haizhilin2013]

第157天 外边距重叠是什么？重叠的结果是什么？怎么防止外边距重叠？

[cxwht]

比如左边一个元素给了个边距为20px，右边给了30px，那么在浏览器中两个元素的间隔将会是30px。

[NicholasBaiYa]

BFC。

[lujinggirl]

1. 外边距重叠是什么？
   外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 重叠后的外边距的高度等于两个发生重叠的外边距的高度中的较大者。
   发生的条件：属于同一个BFC的两个相邻元素上下margin会重叠。
2. 重叠的结果是什么？
   举例1：当一个元素出现在另一个元素上面时，重叠后的外边距的高度等于两个发生重叠的外边距的高度中的较大者。
   举例2： 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生重叠。如果这个外边距遇到另一个元素的外边距，它还会发生重叠。
3. 怎么防止外边距重叠？
4. 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）
5. 外层元素padding代替
6. 内层元素透明边框 border:1px solid transparent;
7. 用同一方向的margin，都设置为top或者bottom。

[vkboo]

• 什么是外边距重叠？

  • 块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者。

• 重叠的结果是什么？

  • 兄弟元素： 毗邻的两个元素之间的外边距会折叠
  • 父子元素：如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面(表现是marign像是作用在了父元素上)。
  • 空的块级元素：如果一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height、min-height 将两者分开，则该元素的上下外边距会折叠。(这一条没明白)

• 怎样防止外边距重叠？

  • 底部元素脱离文档流(float: left/right || position: absolute/fixed)
  • 给兄弟元素设置垂直边界的时候，统一设置一边(margin-top或margin-bottom)

[wuliTaoLeo]

就是BFC嘛 只是换了一种说法嘛