原文
簡書原文：https://www.jianshu.com/p/5f18f12cd162
大綱
1、什么是外邊距合並？(折疊外邊距)
2、外邊距帶來的影響
3、折疊的結果
4、產生折疊的原因
5、出現的情況
1、什么是外邊距合並？(折疊外邊距)
外邊距合並指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合並后的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。而左右外邊距不合並。
在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合並外邊距的方式被稱為折疊，並且因而所結合成的外邊距稱為折疊外邊距。
注釋：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合並。行內框、浮動框或絕對定位之間的外邊距不會合並。
2、外邊距帶來的影響
外邊距帶來的影響有很多種說法，有說是margin越界，也有說是外邊距塌陷，但其實本質上都是外邊距合並的的表現。
3、折疊的結果
兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結果是兩者的相加的和。
4、產生折疊的原因
而根據w3c規范，兩個margin是鄰接的必須滿足以下條件
4.1、必須是處於常規文檔流（非float和絕對定位）的塊級盒子,並且處於同一個BFC當中。
4.2、沒有線盒，沒有空隙（clearance，下面會講到），沒有padding和border將他們分隔開
4.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
5、出現的情況
5.1、兩個不同的div的上下外邊距合並
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#d1 {
width:100px;
height:100px;
margin-top:20px;
margin-bottom:20px;
background-color:red;
}
#d2 {
width:100px;
height:100px;
margin-top:10px;
background-color:blue;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
<p>請注意，兩個 div 之間的外邊距是 20px，而不是 30px（20px + 10px）。</p>
</body>
</html>
5.2、內外div之間外邊距合並（子元素越界或者說margin越界）
<!--
這種情況也叫做子元素越界或者margin越界
margin越界（第一個子元素的margin-top和最后一個子元素的margin-bottom的越界問題）
以第一個子元素的margin-top 為例：
當父元素沒有邊框border時，設置第一個子元素的margin-top值的時候，會出現
margin-top值加在父元素上的現象
-->
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#outer {
width:300px;
height:300px;
background-color:red;
margin-top:20px;
}
#inner {
width:50px;
height:50px;
background-color:blue;
margin-top:10px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
<p>注釋：請注意，如果不設置 div 的內邊距和邊框，那么內部 div 的上外邊距將與外部
div 的上外邊距合並（疊加）。</p>
</body>
</html>
5.3、多個子元素外邊距合並
<!--
只有當前一個子級的寬高為0的時候，換句話說，前一個子級元素沒有辦法限制后一個子
級的margin的越界的時候才會出現這種情況（當然首先父級也無法限制子級的margin越界才
可以）
-->
<html>
<head>
<meta charset="UTF-8">
<title>
盒子模型
</title>
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
div{
width:200px;
height:200px;
margin:0 auto;
}
#div1{
margin-top:10px;
background:red;
}
#div11{
margin-top:20px;
width:0;
height:0;
background:yellow;
}
#div12{
margin-top:30px;
width:50px;
height:50px;
background:blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div11"></div>
<div id="div12"></div>
</div>
</body>
</html>
參考網站
http://www.w3school.com.cn/css/css_margin_collapsing.asp
https://www.cnblogs.com/wangjiaojiao/p/4659429.html
https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html