在使用 CSS 進行頁面設計時，經常需要使用盒子模型，也被稱為 box-model。盒子模型是一種將 HTML 元素表示為矩形的方法，并將每個 HTML 元素塞進一個盒子中。在盒子的邊沿周圍，存在四個區域：margin（外邊距）、border（邊框）、padding（內邊距）以及 element（元素的內容）。我們可以通過 CSS 定義每個矩形的大小、位置、以及邊框和內部的樣式。

/* 示例代碼 */
.box {
width: 400px;
height: 200px;
margin: 20px;
padding: 10px;
border: 1px solid black;
background-color: lightgrey;
}

在上面的示例代碼中，我們創建了一個名為.box的 CSS 類，設置了該矩形盒子的一些屬性。其中，width 和 height 屬性定義了盒子的寬度和高度；margin 屬性定義了盒子周圍的外邊距，使盒子與其他 HTML 元素之間產生距離；padding 屬性定義了盒子周圍的內邊距，通常用于在盒子內部添加空白區域；border 屬性定義了盒子的邊框樣式，包括寬度、顏色等；background-color 屬性定義了盒子的背景顏色。

通過盒子模型，我們可以更好地控制頁面布局，使元素之間有更好的間距和內部間隔，以及更美觀的邊框和顏色。它允許我們更好地設計和組織頁面，從而為用戶提供更好的體驗。