CSS是前端開發過程中不可或缺的一部分，它的作用是控制網頁的樣式，如排版、顏色、字體、邊框等等。然而，在CSS中，有時候我們會遇到一些樣式被擠壓縮在一起的問題。

/* CSS代碼 */
.box {
width: 200px;
height: 100px;
border: 1px solid #000;
margin: 20px;
padding: 10px;
}

以上代碼定義了一個盒子的樣式，它的寬度為200px，高度為100px，邊框為1px黑色實線，外邊距為20px，內邊距為10px。如果我們在HTML中使用該樣式：

<div class="box">
內容
</div>

我們發現，實際上該盒子的寬度并不是200px，而是比200px要小。這是因為邊框和內邊距的引入使得盒子的實際寬度變小了。

那么如何解決這個問題呢？

我們可以使用CSS3的box-sizing屬性來解決這個問題。box-sizing屬性有兩個屬性值：

• content-box：元素的寬度和高度不包括邊框和內邊距，只包括元素的內容。
• border-box：元素的寬度和高度包括邊框和內邊距，不包括外邊距。

將box-sizing屬性設置為border-box即可解決問題：

/* CSS代碼 */
.box {
width: 200px;
height: 100px;
border: 1px solid #000;
margin: 20px;
padding: 10px;
box-sizing: border-box;
}

這樣就能夠保證盒子的實際寬度為200px了。