今天我們要深入探討 CSS 排版的基石：盒子模型（Box Model）。所有在網頁上的 HTML 元素，都可以被視為一個個的矩形盒子。盒子模型就是一套規則，用來解釋這些盒子如何佔據空間，以及其內容、邊框、間距如何計算。理解它，您就能精準地控制每個元素的位置與大小。

CSS 盒子模型 (Box Model)

1.內容區 (Content)

這是盒子的核心，也就是您實際看到的文字、圖片等內容。您可以透過 width 和 height 屬性來設定內容區域的大小。這是盒子尺寸的基礎。

2.內邊距 (Padding)

Padding 是圍繞在「內容」周圍的空間，可以想像成是盒子內部填充的緩衝區域。它位於內容與邊框之間，是透明的，用來增加內容與邊框的距離，讓視覺上更舒適。

3.邊框 (Border)

Border 是包圍在「內距」之外的線條，也就是盒子的外框。您可以設定它的粗細、樣式（實線、虛線等）以及顏色。邊框是內容與外邊距之間的界線。

4.外邊距 (Margin)

Margin 是在「邊框」之外的區域，完全透明，用來控制盒子與其他元素之間的距離。您可以把 Margin 想像成是每個盒子之間的「社交距離」，它不會影響盒子本身的尺寸。

5.盒子尺寸的計算

content-box計算
盒子寬度計算方式=寬 + padding + border
盒子高度計算方式=高 + padding + border
border-box大小
總寬度 = 你設定的 width
總高度 = 你設定的 height

6.CSS box model 盒子模型的示意圖