CSS外邊距是網頁設計中常用的一項樣式設置。但是，很多初學者在使用過程中常常會發現外邊距會撐大盒子的問題。下面我們就來詳細講解一下這個問題。

.box {
width: 200px;
height: 100px;
background-color: #ccc;
margin: 20px;
}

上面的代碼是一個基礎的盒子樣式設置，其中margin屬性設置外邊距為20px。然而，當我們在瀏覽器中查看效果時，會發現盒子的寬度竟然變成了240px。這是為什么呢？

首先，我們需要明確一點，CSS中的外邊距是相對于包含塊元素計算的，而不是相對自身元素。因此，設置了外邊距后，盒子的寬度就會包含了外邊距的寬度，從而撐大了盒子。

接下來，我們可以通過如下方法來解決這個問題：

.box {
width: 200px;
height: 100px;
background-color: #ccc;
margin: 20px;
box-sizing: border-box;
}

在上面的代碼中，我們添加了box-sizing屬性，并將其值設置為border-box。這個屬性可以讓瀏覽器按照盒子的實際寬度來計算內外邊距和邊框，從而避免了外邊距撐大盒子的問題。

總的來說，CSS外邊距在樣式設計中非常常用，但是我們需要注意外邊距對盒子寬度的影響。通過合理設置box-sizing屬性，我們可以避免外邊距撐大盒子的問題。