1.相鄰塊元素垂直外邊距的合併
當上下相鄰的兩個元素相遇的時候,上面元素的有margin-bottom,下面的元素有margin-top時,兩者之間的間距並不是上下邊距之和,而是取兩者之間的較大者,這種現象稱之爲外邊距的塌陷。
如下圖所示
解決方法:
1.給上面盒子margin-bottom:30px,或者給下面盒子margin-top:30px。(儘量避免給兩個盒子同時加)
2.給單獨一個盒子添加一個外容器,給容器添加overflow: hidden觸發想了解BFC,戳這裏
2.嵌套塊元素垂直外邊距的合併
對於兩個嵌套關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併， 合併後的外邊距爲兩者中的較大者， 即使父元素的上外邊距爲0，也會發生合併。
如下圖所示
解決方法:
1.給父元素添加1像素的透明上邊框,但是會撐大父盒子，所以父盒子高度減1
2.給父元素添加1像素的上內邊距,但是會撐大父盒子，所以父盒子高度減1
3.給父元素添加overflow:hidden,觸發BFC想了解BFC,戳這裏