外邊距合并指的是：當兩個垂直外邊距相遇時，它們將形成一個外邊框。
合并后的外邊距高度等于兩個發(fā)生合并的外邊距的較大者。
外邊距合并
外邊距合并是一個相當簡單的概念，但是在實際應(yīng)用之中，會發(fā)生很多混淆。
簡單的說，外邊距合并指的是，當兩個垂直外邊距相遇的時候，它們將形成一個外邊框，合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
當一個元素出現(xiàn)在另外一個元素上面時，第一個元素的下外邊距會和第二個元素的上外邊距發(fā)生合并。例子如下圖：
![34)2CA3KROA5K}]JICOSRZ7.png](http://upload-images.jianshu.io/upload_images/6358919-7fce3a75c3a5410a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
當一個元素包含在另一個元素中的時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分割開），它們的上/下外邊距也會發(fā)生合并。如圖：
![)M$0BTHX]~GYUU1``4WNJ3F.png](http://upload-images.jianshu.io/upload_images/6358919-7c459fa67fafef5a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
盡管看上去有些奇怪，但是外邊距設(shè)置可以與自身發(fā)生合并。
假設(shè)有一個空元素。它有外邊距，但是沒有邊框或者填充。在這種情況之下，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并：
如果這個外邊距遇到另一個元素的外邊距，它還會發(fā)生合并：
這就是一系列的段落元素占用空間非常小的原因，因為它們所有的外邊距都合并到了一起，形成了一個小的外邊距。
外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本界面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。
**只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。
1、在常規(guī)文檔流中，2個或以上的塊級盒模型相鄰的垂直margin會被折疊。
最終的margin值計算方法如下：
a、全部都為正值，取最大者；
b、不全是正值，則都取絕對值，然后用正值減去最大值；
c、沒有正值，則都取絕對值，然后用0減去最大值。
注意：相鄰的盒模型可能由DOM元素動態(tài)產(chǎn)生并沒有相鄰或繼承關(guān)系。
2、相鄰的盒模型中，如果其中的一個是浮動的（floated），垂直margin不會被折疊，甚至一個浮動的盒模型和它的子元素之間也是這樣。
3、設(shè)置了overflow屬性的元素和它的子元素之間的margin不會被折疊（overflow取值為visible除外）。
4、設(shè)置了絕對定位（position:absolute）的盒模型，垂直margin不會被折疊，甚至和他們的子元素之間也是一樣。
5、設(shè)置了display:inline-block的元素，垂直margin不會被折疊，甚至和他們的子元素之間也是一樣。
6、如果一個盒模型的上下margin相鄰，這時它的margin可能折疊覆蓋（collapse through）它。在這種情況下，元素的位置（position）取決于它的相鄰元素的margin是否被折疊。
a、如果元素的margin和它的父元素的margin-top折疊在一起，盒模型border-top的邊界定義和它的父元素相同。
b、另外，任意元素的父元素不參與margin的折疊，或者說只有父元素的margin-bottom是參與計算的。如果元素的border-top非零，那么元素的border-top邊界位置和原來一樣。
一個應(yīng)用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom折疊。
注意，那些已經(jīng)被折疊覆蓋的元素的位置對其他已經(jīng)被折疊的元素的位置沒有任何影響；只有在對這些元素的子元素定位時，border-top邊界位置才是必需的。
7、根元素的垂直margin不會被折疊。
浮動的塊級元素的margin-bottom總是與它后面的浮動塊級兄弟元素（floated next in-flow block-level sibling）的margin-top相鄰，除非那個同級元素使用了清除操作。
浮 動的塊級元素的margin-top和它的第一個浮動塊級子元素（floated first in-flow block-level child）的margin-top相鄰（如果該元素沒有border-top，沒有padding-top，并且子元素沒有使用清除操作）。
浮動的塊級元素的margin-bottom如果符合下列條件，那么它和它的最后一個浮動塊級子元素的margin-bottom相鄰（如果該元素沒有指定padding-bottom或border）：
a、指定了height:auto
b、min-height小于元素的實際使用高度（height）
c、max-height大于元素的實際使用高度（height）
如 果一個元素的min-height屬性設(shè)置為0，那么它所擁有的margin是相鄰的，并且它既沒有border-top和border- bottom，也沒有padding-top和padding-bottom，它的height屬性可以是0或auto，它不能包含一個內(nèi)聯(lián)的盒模型 （line box），它所有的浮動子元素（如果有的話）的margin也都是相鄰的。
當一個元素擁有的margin折疊了，并且它使用了清除操作，那么它的margin-top會和緊隨其后的兄弟元素的相鄰margin折疊，但結(jié)果是它的margin將無法和其塊級父元素的margin-bottom折疊。
