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中外边距的计算方式并在布局中合理运用与调整。