外边距塌陷+轻松解决外边距塌陷的问题

16.1 外边距塌陷

1.父子关系的块元素

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

2.兄弟关系的块元素

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

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

• 效果图如下：
  

16.2 解决外边距塌陷的方法

1.解决父子关系的塌陷

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

2.解决兄弟关系的塌陷

• 只设置其中一个值就可以了