CSS 外邊距合并是指在垂直方向上相鄰元素之間的外邊距會合并成一個外邊距的過程。這種合并方式會讓很多初學者感到困惑，因為它不同于我們在計算上所熟悉的加法運算。

那么外邊距到底會怎么合并呢？

.box1 {
margin-bottom: 20px;
}
.box2 {
margin-top: 30px;
}

上面這段代碼中，box1 和 box2 是相鄰的兩個元素，它們之間的垂直距離應該是它們各自 margin 值的和，也就是 50px（20px + 30px），但是實際上瀏覽器只會應用其中的較大值，也就是 30px。因此，它們之間的垂直距離為 30px，而不是 50px。

另外，如果一個元素的 margin-top 和 margin-bottom 都為正值，那么它們會合并成一個外邊距，其值為它們兩個值的和。

.box {
margin-top: 20px;
margin-bottom: 30px;
}

在這個例子中，.box 中的 margin 合并成了 50px，而不是 20px 和 30px 的總和 50px。這種合并方式稱為“外邊距折疊”。

值得注意的是，如果一個元素包含了某個子元素，而該子元素設置了 margin，那么它們之間的 margin 不會合并，而是各自獨立。

.box {
margin-top: 20px;
margin-bottom: 30px;
}
.box p {
margin-top: 10px;
margin-bottom: 5px;
}

在這個例子中，.box 中的 margin 與其包含的 p 元素中 margin 不會合并。因此，.box 和 p 之間的垂直距離應該是它們各自 margin 值的和，也就是 60px（20px + 30px + 10px + 5px）。

總之，在排版時，我們需要注意元素之間 margin 的處理方式，以便得到我們期望的布局效果。