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

Answer 1

1. 外边距重叠是什么？
   外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 重叠后的外边距的高度等于两个发生重叠的外边距的高度中的较大者。
   发生的条件：属于同一个BFC的两个相邻元素上下margin会重叠。
2. 重叠的结果是什么？
   举例1：当一个元素出现在另一个元素上面时，重叠后的外边距的高度等于两个发生重叠的外边距的高度中的较大者。
   举例2： 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生重叠。如果这个外边距遇到另一个元素的外边距，它还会发生重叠。
3. 怎么防止外边距重叠？

• 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）
• 外层元素padding代替
• 内层元素透明边框 border:1px solid transparent;
• 用同一方向的margin，都设置为top或者bottom。