2、margin相鄰摺疊問題
在開發中，我們偶爾會遇到明明兩個div都設定了margin，可是它們之間的距離就是不等於兩個div的margin之間的和，這是為什麼呢？其實是因為在某些情況下，兩個或多個塊元素的相鄰邊界（其間沒有任何非空內容、padding、邊框）會發生合併成單一邊界，也就是標題說的摺疊。
先來看看兄弟塊級元素的摺疊，如下圖所示：
還要注意的是，父元素與其子元素之間也會發生摺疊：
2個或多個塊級相鄰元素的外邊距（margin）的摺疊規則：
不發生摺疊情況：
解決摺疊的方法：
關於盒子外邊距合併
外邊距合併，對於兩個巢狀關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上邊距會與子元素的上邊距合併，合併後的外邊距取兩者中的較大者。即使父元素的上外邊距為0，也會發生合併。即為當父盒子裡的子盒子給它乙個margin值時，子盒子的移動會影響父盒子一起移動 這裡當子盒子給了margin top ...
外邊距合併（外邊距塌陷）
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直間距不是margin bottom與margin top之和，而是兩者中的較大者。這種現象被稱...
外邊距塌陷 外邊距合併
1.父子塊級 元素外邊距塌陷 子元素加margin top,父元素也加margin top,如果父元素沒有設定margin top,那預設0,取的是其中最大 的值,這個效果作用父元素身上啦 原因 他倆共用乙個外邊距 解決 方法一 給父元素加 border padding 方法二 給父元素加overf...