外邊距margin合併：

當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

摺疊的結果

1. 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。
2. 兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。
3. 兩個外邊距一正一負時，摺疊結果是兩者的相加的和。

產生摺疊的原因

而根據w3c規範，兩個margin是鄰接的必須滿足以下條件
1、必須是處於常規文件流（非float和絕對定位）的塊級盒子,並且處於同一個BFC當中。
2、沒有線盒，沒有空隙（clearance，下面會講到），沒有padding和border將他們分隔開
3、都屬於垂直方向上相鄰的外邊距，可以是下面任意一種情況：
a:元素的margin-top與其第一個常規文件流的子元素的margin-top。
b:元素的margin-bottom與其下一個常規文件流的兄弟元素的margin-top。
c:height為auto的元素的margin-bottom與其最後一個常規文件流的子元素的margin-bottom。
d:高度為0並且最小高度也為0，不包含常規文件流的子元素，並且自身沒有建立新的BFC的元素的margin-top和margin-bottom。

註釋：只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。

出現的情況

1、當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：

親自試一試

2、當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：

親自試一試

儘管看上去有些奇怪，但是外邊距甚至可以與自身發生合併。

3、假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併：

如果這個外邊距遇到另一個元素的外邊距，它還會發生合併：

這就是一系列的段落元素佔用空間非常小的原因，因為它們的所有外邊距都合併到一起，形成了一個小的外邊距。

4、外邊距合併初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文字頁面為例。第一個段落上面的空間等於段落的上外邊距。如果沒有外邊距合併，後續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合併，段落之間的上外邊距和下外邊距就合併在一起，這樣各處的距離就一致了。