CSS是一種非常重要的網頁設計語言，它可以讓我們實現極度自由的排版和布局效果。其中外邊距是CSS常用的一種屬性，因此理解外邊距的計算方式對于掌握CSS布局至關重要。

外邊距是指元素邊緣和相鄰元素邊緣(或父元素邊緣)之間的距離。首先我們要理解外邊距的計算方式分為兩種：

1. 外邊距垂直方向的合并
2. 外邊距水平方向的重疊

第一種情況下兩個相鄰元素的外邊距會合并成一個值，即兩者中間的空間寬度等于兩個外邊距間的最大值。

p {
margin-top: 15px;
}
p + p {
margin-top: 30px;
}

在這個例子中，第二個p元素的上外邊距將會被第一個p元素的下外邊距吸收，因此實際上兩個段落之間的垂直間距是30px而不是15px+30px=45px。

第二種情況則是在元素水平方向上應用外邊距時，如果兩個元素的外邊距重合，則將采用兩者中較大的一個值。

p {
margin-right: 10px;
}
p + p {
margin-left: 20px;
}

在這個例子中，第二個p元素的左外邊距將為20px而不是10px+20px=30px。

通過以上的解釋，我們可以更好地理解CSS中外邊距的計算方式并在布局中合理運用與調整。