margin合并是什么？
我們來簡單看一下MDN對margin合并的解釋：
塊的頂部外邊距和底部外邊距有時(shí)被組合（折疊）為單個外邊距，其大小是組合到其中的最大外邊距，這種行為稱為外邊距塌陷（也叫外邊距合并）。
發(fā)生外邊距塌陷的三種情況：
- 相鄰的兄弟姐妹元素（除非后者兄弟姐妹需要清除過去的浮動）
- 塊級父元素與其第一個/最后一個子元素
- 空塊元素
下面，我們通過幾個實(shí)例對這三種情況進(jìn)行解釋。
本文結(jié)構(gòu)：
- 相鄰的兄弟姐妹元素
- 塊級父元素與其第一個/最后一個子元素
- 空塊元素
- 總結(jié)
一、相鄰的兄弟姐妹元素
我們來看MDN：毗鄰的兩個兄弟元素之間的外邊距會塌陷（除非后者兄弟姐妹需要清除過去的浮動）。
這句話有兩個要點(diǎn)：
1、一般情況：毗鄰的兩個兄弟元素之間的外邊距會塌陷；
2、特殊情況：當(dāng)后面div需要清除過去的浮動時(shí)，毗鄰的兩個兄弟元素之間的外邊距不會塌陷。
我們對這兩個要點(diǎn)分別進(jìn)行研究。
1、一般情況
這種情況比較簡單，我們直接來看例子：
// html
<body>
<div class='bro1'></div>
<div class='bro2'> </div>
</body>
// css
body{
margin:0;
padding:0;
}
.bro1{
width:300px;
height:200px;
background:#ddd;
margin-bottom:30px;
}
.bro2{
width:200px;
height:100px;
background:pink;
}
結(jié)果：
上面的例子中，我們給灰色的div設(shè)置了30px的下外邊距，這時(shí)的顯示都是符合預(yù)期的。現(xiàn)在我們給粉色的div添加一個margin-top:20px：
// css
.bro2{
margin-top:20px;
}
結(jié)果：
按照我們的預(yù)期，應(yīng)該是灰色div的margin-bottom與粉色div的margin-top疊加，最終使得兩個div的間隔為50px。但是我們看到，結(jié)果并沒有改變。
現(xiàn)在我們改變粉色div的margin-top為60px：
// css
.bro2{
margin-top:60px;
}
結(jié)果：
按照我們的預(yù)期，應(yīng)該是灰色div的margin-bottom與粉色div的margin-top疊加，最終使得兩個div的間隔為90px。但是我們看到，兩個div的間隔為粉色div設(shè)置的margin-top。
這種現(xiàn)象就是外邊距合并的典型情況。相鄰的兩個兄弟元素之間的外邊距會取兩者之前的最大值進(jìn)行合并。灰色div的下邊距為30px，當(dāng)粉色div的上邊距為20px時(shí)，取兩者中的較大值30px，所以兩個div的間隔為30px；當(dāng)粉色div的上邊距為60px時(shí)，取兩者中的較大值60px，所以兩個div的間隔為60px。
2、特殊情況
我們來看一個例子：
// html
<body>
<div class='bro1'></div>
<div class='bro2'></div>
</body>
// css
body{
padding-top:1px; //若不設(shè)置，body和灰色div會存在父子元素之間的margin合并
}
.bro1{
width:300px;
height:200px;
background:#ddd;
margin-bottom:30px;
float:left;
}
.bro2{
width:200px;
height:100px;
background:pink;
margin-top:50px;
clear:both;
}
結(jié)果：
我們給第一個灰色div設(shè)置了浮動，又在粉色div中清除了浮動。灰色div有一個30px的下邊距，粉色div有一個50px的上邊距，結(jié)果兩個div間的間距為30px。
在上面的例子中，粉色div的margin-top是相對于頂部而非灰色的div，因?yàn)榛疑膁iv設(shè)置了浮動，已經(jīng)脫離了文檔流，所以粉色div實(shí)際上是看不到這個灰色div的。但是這個粉色div又必須在灰色div的下面，所以粉色div距離頂部的距離為200px+30px=230px。上面的例子中，兩個div的距離為30px，是因?yàn)榉凵玠iv的margin-top設(shè)置得太小，粉色div沒辦法到距離頂部為50px的地方去。
現(xiàn)在我們增大粉色div的margin-top：
.bro2{
margin-top:250px;
}
結(jié)果：
總結(jié)：毗鄰的兩個兄弟元素之間的外邊距會塌陷（除非后者兄弟姐妹需要清除過去的浮動）。
二、塊級父元素與其第一個/最后一個子元素
我們來看MDN：
- 上邊距合并：如果塊級父元素與第一個子元素之間不存在上邊框、上內(nèi)補(bǔ)、inline content、清除浮動這四條屬性之一（對于上邊框和上內(nèi)補(bǔ)，也可以說，當(dāng)上邊距及上內(nèi)補(bǔ)寬度為0時(shí)），那么這個塊級元素和其第一個子元素的上邊距就可以說“挨到了一起”。此時(shí)這個塊級父元素和其第一個子元素就會發(fā)生上外邊距合并的現(xiàn)象，換句話說，此時(shí)這個父元素對外展現(xiàn)出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者，而父元素與該子元素之間邊距消失。
- 下邊距合并：類似的，若塊級元素的margin-bottom與它的最后一個子元素的margin-bottom之間沒有border、padding、inline content、height、min-height、max-height分隔時(shí)，就會發(fā)生下邊距合并的現(xiàn)象。
我們先看一個例子：
// html
<body>
<div class='parent'>
<div class='child1'></div>
<div class='child2'></div>
</div>
</body>
// css
.parent{
width:400px;
height:300px;
background:#ddd;
}
.child1{
width:300px;
height:100px;
background:pink;
}
.child2{
width:200px;
height:100px;
background:gray;
}
結(jié)果：
現(xiàn)在我們想讓粉色div和父div之前有40px的空隙，所以給粉色div設(shè)置"margin-top:40px"：
.child1{
margin-top:40px;
}
預(yù)期結(jié)果：
實(shí)際結(jié)果：
這就是父子元素之間的margin合并。由于粉色div與父div之間沒有上邊框、上內(nèi)補(bǔ)、inline content、清除浮動這四條屬性之一，使得兩個div之間產(chǎn)生了margin合并的現(xiàn)象。
同樣地，父元素與最后一個子元素之間也可能發(fā)生margin合并的情況，情況大致相同，不再舉例說明。
三、空塊元素
我們來看MDN：如果存在一個空的塊級元素，其border、padding、inline content、height、min-height都不存在，那么此時(shí)它的上下邊距中間將沒有任何阻隔，此時(shí)它的上下外邊距將會合并。
這個很簡單，我們直接看例子：
// html
<body>
<div class='bro1'></div>
<div class='special'></div>
<div class='bro2'></div>
</body>
// css
.bro1{
width:300px;
height:200px;
background:#ddd;
}
.bro2{
width:200px;
height:100px;
background:pink;
}
.special{
margin-top:20px;
margin-bottom:30px;
}
結(jié)果：
為了更好地對比，我們給.psecial加一點(diǎn)高度：
.special{
height:10px;
}
結(jié)果：
給.psecial加寬度之后，.special就不是空元素，所以它不會發(fā)生margin合并的現(xiàn)象，所以灰色和粉色div的間隔為20px+10px+30px=60px。
四、總結(jié)
- 發(fā)生外邊距合并的元素：塊元素之間（父子、兄弟、空塊）；發(fā)生外邊距合并的邊距：上、下邊距（左右邊距不會合并）；
- 相鄰的兄弟元素之間必出現(xiàn)margin合并（除非后者兄弟姐妹需要清除過去的浮動）；
- 父元素與第一個子元素間，如果沒有padding、border、inline content、清除浮動這四個屬性之一，就會出現(xiàn)上邊距合并；
- 父元素與最后一個子元素之間，如果沒有padding、border、inline content、height、min-height、max-height這幾個屬性之一，就會出現(xiàn)下邊距合并；
- 空的塊級元素，如果其border、padding、inline content、height、min-height都不存在，那么它的上下外邊距將會合并。
由于個人水平有限，博客錯誤之處，煩請指正！
