CSS外邊距塌陷，也被稱作margin collapsing，是指當兩個或多個垂直相鄰的元素，它們之間的外邊距會重疊在一起，產生了一個新的外邊距。

當相鄰的塊元素具有相同方向的margin-top和margin-bottom值時，將發生外邊距塌陷，新的外邊距將是相鄰外邊距的最大值（兩者中較大的值）。

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

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

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

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

有時候，這種折疊現象可能并不是我們想要的，例如當我們給一個塊元素添加邊框或背景顏色時，邊框或背景會延伸到外邊距處。解決這個問題的方法有兩個：

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

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