CSS外邊距合並的幾種情況

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

外邊距在CSS1中就有

The width of the margin on non-floating block-level elements specifies the minimum distance to the edges of surrounding boxes. Two or more adjoining vertical margins (i.e., with no border, padding or content between them) are collapsed to use the maximum of the margin values. In most cases, after collapsing the vertical margins the result is visually more pleasing and closer to what the designer expects.

意思是說，非浮動塊級元素的外邊距寬度指定了其到環繞元素的邊緣的最小距離。兩個或更多的垂直外邊距（比如，沒有邊框，內邊距或內容在它們之間）就會發生合並，其值為它們中的最大者。在大多數情況下，在垂直方向發生外邊距合並的結果，是設計師所喜聞樂見的。

按照這一設計思想，CSS外邊距合並會在以下幾種情況發生。

1 上下元素挨在一起

當一個元素位於另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合並。合並后的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。

<!-- sytle.css -->
.div1{
margin:10px; 
border:1px solid gray;
}
.div2{
margin:20px; 
border:1px solid gray;
}

<div class='div1'>內容1</div>
<div class='div2'>內容2</div>

結果是div1和div2的間距是20px。

2 子元素包含在父元素之中

當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合並。如果父元素有內邊距或邊框，則子元素的外邊距以父元素的內邊距或邊框為准，不會發生外邊距合並。

<!-- sytle.css -->
.div1{
margin:10px; 

}
.div2{
margin:30px; 
    border:1px solid gray;
}

<div class='div1'>
    <div class='div2'>內容2</div>
    內容1
</div>

顯示結果為：

父元素div1和子元素div2的上外邊距之間沒有邊框或內邊距阻隔，導致兩者的上外邊距合並，從而導致父元素div1至其上部元素的距離變為30px（兩者合並取大值）。如果父元素有上邊框或上外邊距，則不會發生外邊距合並。

3 空元素的外邊距合並

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

<!-- sytle.css -->
.div1{
margin:10px; 

}
.div2{
margin:10px; 
border:1px solid gray;
}

<div class='div1'>內容1</div>
<div class='div2'></div>
<div class='div1'>內容1</div>

顯示為：

元素div2的上下邊距合並，邊框變成了一條直線

注意

只有普通文檔流中塊元素的垂直外邊距才會發生外邊距合並。行內元素、浮動元素或絕對定位之間的外邊距不會合並。因為CSS 的 外邊距合並 設計之初就是為實現文本排版的段落間距而提供的特性。理解了這一設計意圖，也就能理解哪些情況會發生外邊距合並以及如何利用這一特性。但是明白它的用途就可以知道它是非常有用的、不可能被舍棄的特性。實際上這個特性還會進化，CSS3支持豎排文本，對於豎排文本來說，collapse應該發生在水平方向而不是垂直方向。