CSS margin外边距塌陷、合并问题

16.1 外边距塌陷 – 父子关系的块元素

• 如果一方有margin-top，则父子盒子一起有同样值上外边距；
• 如果两方都有margin-top，则父子盒子取较大值的上边距；
• 效果图如下：
  

16.2 外边距合并 – 兄弟关系的块元素

• 如果相邻兄弟有单独的margin-top / margin-bottom 是不会塌陷的
• 相邻兄弟的上面一个块元素使用了margin-bottom，而下面的块元素使用margin-bottom就会发生塌陷问题：

1. 若值相同，则其中一个margin会不起作用；
2. 若值不同，则只有值较大的会起作用；

• 效果图如下：
  

16.3 解决外边距塌陷、合并的方法

1.外边距塌陷

• 给父元素加边框 border（值可以是1px）；
• 给父元素加内边距 padding（值可以是1px，或者直接设置以达到想要 的效果）；
• 父元素触发 BFC

  float ：除 none 以外的值
  position ：absolute、fixed
display ： inline-block、table-cells、flex
overflow ：hidden、auto、scroll

2.外边距合并

• 只设置其中一个值就可以了
• 给每个要设置外边距的元素，套上一个触发 BFC 的 父元素

注：脱离标准流的元素(浮动、绝对、固定)