前提

只有在普通文檔流中垂直相鄰外邊距會合并。

行內框，浮動框或者定位之間的外邊距不會合并。
 
1.相鄰元素有多個外邊距

<ul>
    <li>line 1</li>
    <li>line 2</li>
</ul>
<h3>This is h3 line.</h3>
ul{margin-bottom:15px;}
li{margin-top:10px;margin-bottom:20px;}
h3{margin-top:28px;}

ul下邊距為15px，li下邊距為20px，h3上邊距為28px，外邊距合并會取大值而非相加，由此line 2與h3間距為28px。

注：如果給ul加一個邊框，li下邊距將被放在ul內部，此時只會發生ul與h3之間的合并。

如果ul,h3外邊距都為負值，則取值大的負外邊距與大的正外邊距相加，得到間距。


2.塊元素內部包含塊元素（父元素沒有設置內邊距或者邊框）

<div id="outer">
  <div id="inner"></div>
</div>
復制代碼
#outer{
width:200px;
height:100px;
background:rgb(245,138,158);
margin-top:20px;
}
#inner{
width:50px;
height:50px;
background:rgb(147,172,213);
margin-top:10px;
}

復制代碼
inner沒有預想中的相對outer下沉10px，而是保持和outer位置相對不變，outer整體下沉10px。此時如果設置outer的上外邊距為20px，兩者相較取其大，整體outer下沉20px。

如果給父元素加邊框（或內邊距）隔開內部元素的外邊距，則不會發生外邊距合并：
#outer{border:1px solid rgb(147,172,213);} 
注：塊元素內包含行內元素的話不會發生外邊距合并（見水平居中與垂直居中）。

空元素的上下外邊距合并
<div class="blank"></div>
<div class="focus"></div>
<div class="blank"></div>
復制代碼
.blank{
  width:100px;
  height:50px;
  background:rgb(245,138,158);
}
.focus{margin:10px 0 20px 0;}