Skip to main content

Box-model介紹

CSS 的 Box Model 是描述 HTML 元素在網頁佈局中如何被渲染的模型。每個 HTML 元素（例如 <div>、<p>、<img>）都可以被視為一個「矩形盒子」，這個盒子由以下幾個部分組成，從內到外分別是：

  1. Content（內容）：元素的實際內容，例如文字、圖片等，寬高由 width 和 height 屬性控制。

  2. Padding（內邊距）：內容與邊框之間的空間，會增加元素的內部空間。

  3. Border（邊框）：包圍在內邊距外圍的框線，可以設定粗細、樣式和顏色。

  4. Margin（外邊距）：邊框外圍的空間，用來控制元素與其他元素之間的距離。

這四個部分共同決定了一個元素在頁面上的總尺寸和位置。

image.png

Box Model 的運作方式​

當你設定一個元素的 width 和 height 時，實際上只設定了 Content 的尺寸。如果有 Padding、Border 或 Margin，這些部分會額外增加元素的總寬高。

標準 Box Model（預設）​

在標準 Box Model 中，元素的總寬度和總高度計算方式如下：

  • 總寬度 = 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 Model（box-sizing: border-box）​

CSS 提供了一個屬性 box-sizing，可以改變 Box Model 的計算方式。如果設定 box-sizing: border-box，則 width 和 height 會包含 Content、Padding 和 Border，但不包含 Margin。這種方式在佈局時更直觀，常被前端工程師使用。

  • 總寬度 = width（包含 Content + Padding + Border） + margin-left + margin-right

  • 總高度 = height（包含 Content + Padding + Border） + margin-top + margin-bottom

image.png

Image by LeoPantero (planflow.dev)