塊級元素的上下外邊距有時候會合并材原，合并后的外邊距等于合并前兩個外邊距中的較大值沸久，這種現象稱為外邊距塌陷。
外邊距塌陷有以下三種情況：
同級相鄰元素
同級相鄰元素之間的外邊距會塌陷余蟹，塌陷后的間距等于兩個元素外邊距的較大值（如果后者被清除浮動卷胯，不遵循此規(guī)則），例如：
h1 {
margin: 0 0 25px 0;
background: #cfc;
}
p {
margin: 20px 0 0 0;
background: #cf9;
}
父子元素間的邊距塌陷
如果塊級父元素中威酒，不存在border, padding, 行內元素以及清除浮動這四條屬性（對于border和padding窑睁，也可以說，當上border及上padding寬度為0時）葵孤，那么這個塊級元素和其第一個子元素的上外邊距（margin-top）就可以說”挨到了一起“担钮。此時這個塊級父元素和其第一個子元素就會發(fā)生 上外邊距塌陷 現象，換句話說尤仍，此時這個父元素對外展現出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者箫津。
類似地，若塊級父元素的下外邊距（margin-bottom）與它的最后一個子元素的下外邊距之間沒有父元素的border, padding, 行內元素宰啦，height, min-height, max-height分隔時苏遥，就會發(fā)生 下外邊距塌陷 現象。
下面是一個上外邊距合并的例子：
<h1>Heading Content</h1>
<div>
<p>Paragraph content</p>
</div>
h1 {
margin: 0;
background: #cff;
}
div {
margin: 40px 0 25px 0;
background: #cfc;
}
p {
margin: 20px 0 0 0;
background: #cf9;
}
這段代碼的輸出結果為：
可以看到在正文元素中赡模，父元素的上外邊距為40px田炭，子元素的上外邊距為20px，然后最終正文和標題之間的距離卻是40px而不是60px漓柑。因為父子元素間發(fā)生了外邊距塌陷教硫。為了避免邊距塌陷，只需要將父元素和子元素的外邊距“分隔開”欺缘，例如為父元素添加一個邊框：
h1 {
margin: 0;
background: #cff;
}
div {
margin: 40px 0 25px 0;
background: #cfc;
border-top: 1px solid #000;
}
p {
margin: 20px 0 0 0;
background: #cf9;
}
輸出結果為：
空的塊級元素
當一個空的塊級元素的上邊距（margin-top）和下邊距（margin-bottom）之間沒有border栋豫，padding，行內元素谚殊，height谤专，min-height分隔時发侵，上下邊距會塌陷。
小結
- 以上幾種情況同時出現會產生更復雜的邊距塌陷問題。
- 這些規(guī)則在邊距為0時同樣適用撩满，因此父元素中的第一個和最后一個子元素的外邊距總是會超出父元素（滿足上述幾種情況時），無論父元素的邊距是否為0担神。
- 當使用負邊距時怕磨，塌陷后的邊距等于最大的正邊距和最大負邊距的代數和。
- 浮動元素和絕對定位元素永遠不會塌陷置尔。
