在前幾天，我們已經認識了 HTML 的骨架與語義化標籤，並開始用 CSS 打扮網頁。
今天要介紹的是CSS的盒模型（Box Model）——每個元素在網頁上占據空間的基本概念
當對一個文件進行佈局（layout）時，瀏覽器的渲染引擎會根據 CSS 基礎框盒模型，把所有元素視為一個個矩形盒子（box）。
CSS 決定這些盒子的 大小、位置與屬性，例如文字顏色、背景、邊框尺寸等。

以下是CSS 基礎框盒模型（Box Model）介紹
每個盒子由四個部分（區域）組成，其效用由各自的邊界（Edge）定義。對應的四個區域與邊界如下：

• 內容邊界（Content Edge）
• 內邊距邊界（Padding Edge）
• 邊框邊界（Border Edge）
• 外邊距邊界（Margin Edge）

1. 內容區域（Content Area）

定義：由內容邊界限制，容納元素的「真實」內容，例如文字、圖像或影片播放器。
尺寸：內容寬度（content-box width）與內容高度（content-box height）。
背景：通常有背景顏色或背景圖像，預設為透明。
CSS 控制：如果 box-sizing: content-box（預設），可使用 width、min-width、max-width、height、min-height、max-height 控制大小。

div {
width: 200px;
height: 100px;
background-color: lightblue;
box-sizing: content-box; /* 預設模式 */
}

2. 內邊距區域（Padding Area）

定義：由內邊距邊界限制，延伸自內容區域，填滿內容與邊框之間的距離。
尺寸：padding-box 寬度與高度。
CSS 控制：可單獨設定四邊 padding-top、padding-right、padding-bottom、padding-left，或用簡寫 padding。

div {
padding: 20px; /* 四邊內距都是20px */
}

3. 邊框區域（Border Area）

定義：由邊框邊界限制，容納邊框的區域，擴展自內邊距區域。
尺寸：border-box 寬度與高度。
CSS 控制：border-width 或簡寫 border 控制粗細與樣式。
注意：如果 box-sizing: border-box，寬高會包含 padding 和 border，計算更方便。
背景延伸：背景會延伸到邊框下層，透過 background-clip 可修改。

div {
border: 2px solid black;
box-sizing: border-box; /* 寬高包含內距和邊框 */
}

4. 外邊距區域（Margin Area）

定義：由外邊距邊界限制，空白區域分開相鄰元素。
尺寸：margin-box 寬度與高度。
CSS 控制：margin-top、margin-right、margin-bottom、margin-left，或簡寫 margin。
注意：外邊距合併（margin collapse）會影響相鄰元素的距離。

div {
margin: 10px; /* 四邊外距都是10px */
}

5. 行內元素的特殊情況

對行內元素（例如文字），雖然會有 padding 與 border，但實際佔用空間高度由 line-height 控制。
邊框和內距仍會顯示在內容周圍，但不會改變文字行高。

span {
padding: 5px;
border: 1px solid red;
line-height: 24px;
}

學習心得
學了盒模型後，才知道我之前遇到網頁元素亂跑或重疊，是這方面的問題，現在知道要先看看 margin、padding 和 border，加快找到問題的速度。理解了 content-box 和 border-box 後，調整元素大小也不會算錯。用瀏覽器檢查工具看 box model，也能快速知道元素尺寸和間距，以此省下很多摸索時間。總之，盒模型是 CSS 的基礎，掌握它後，排版和設計都會順手很多。