CSS外邊距塌陷，也被稱作margin collapsing，是指當(dāng)兩個(gè)或多個(gè)垂直相鄰的元素，它們之間的外邊距會(huì)重疊在一起，產(chǎn)生了一個(gè)新的外邊距。

當(dāng)相鄰的塊元素具有相同方向的margin-top和margin-bottom值時(shí)，將發(fā)生外邊距塌陷，新的外邊距將是相鄰?fù)膺吘嗟淖畲笾担▋烧咧休^大的值）。

舉個(gè)例子，如果我們有兩個(gè)垂直相鄰的塊元素，它們的外邊距都設(shè)置為10px，那么它們之間的外邊距將會(huì)被折疊為10px，而不是20px。

<div class="box1"></div>
<div class="box2"></div>
.box1 {
margin-bottom: 10px;
}
.box2 {
margin-top: 10px;
}

在上面的例子中，box1和box2之間的邊距將被折疊，只產(chǎn)生一個(gè)10px的邊距。這種情況下，樣式如下：

.box1 {
margin-bottom: 10px;
}
.box2 {
margin-top: 0;
}

有時(shí)候，這種折疊現(xiàn)象可能并不是我們想要的，例如當(dāng)我們給一個(gè)塊元素添加邊框或背景顏色時(shí)，邊框或背景會(huì)延伸到外邊距處。解決這個(gè)問題的方法有兩個(gè)：

• 將相鄰元素的外邊距調(diào)整為不相等的值。
• 通過添加padding、border或清除浮動(dòng)來打破外邊距塌陷。

總之，理解并避免CSS外邊距塌陷對于掌握CSS布局是非常重要的。