CSS Box-Model 區塊模型

CSS 排版的核心概念之一。每個 HTML 元素都可以被視為一個獨立的區塊模型，這個模型由四個部分組成，從內到外分別是：content、padding、border、margin。

區塊模型結構

• content: 顯示元素實際內容的區域，例如: 文字、圖片等。可用 width 和 height 屬性設定其大小。
• padding: 內容區與邊框之間的空間。
• border: 邊框。邊框為內、外距的分界。
• margin: 外距、邊界。邊框以外與其他元素之間的空間。

視覺化示意圖

+-------------------------------+
|           margin              |
|  +-------------------------+  |
|  |        border           |  |
|  |  +-------------------+  |  |
|  |  |     padding       |  |  |
|  |  |  +------------+   |  |  |
|  |  |  |  content   |   |  |  |
|  |  |  +------------+   |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

區塊模型的計算方式

• 寬度: content 的寬度。
• 高度: content 的高度。
• 總寬度: width + padding-left + padding-right + border-left + border-right + margin-left + margin-right。
• 總高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom。

box-sizing

重新定義元素寬、高的顯示方式。

• content-box: width 和 height 只包含內容區，不包含 padding 和 border。
• border-box: width 和 height 包含內容區、padding 和 border。

總結

• 區塊模型是 CSS 排版的基礎。
• 熟悉各層的作用與計算方式，有助於精確控制元素的大小與間距。
• 建議在專案中統一使用 box-sizing: border-box;，方便維護與預測元素尺寸。