CSS 框模型
CSS 框模型
所有 HTML 元素都可以視為方框。在 CSS 中,在談論設計和布局時,會使用術語“盒模型”或“框模型”。
CSS 框模型實質上是一個包圍每個 HTML 元素的框。它包括:外邊距、邊框、內邊距以及實際的內容。下圖展示了框模型:

對不同部分的說明:
- 內容 - 框的內容,其中顯示文本和圖像。
- 內邊距 - 清除內容周圍的區域。內邊距是透明的。
- 邊框 - 圍繞內邊距和內容的邊框。
- 外邊距 - 清除邊界外的區域。外邊距是透明的。
框模型允許我們在元素周圍添加邊框,并定義元素之間的空間。
元素框的最內部分是實際的內容,直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距,外邊距默認是透明的,因此不會遮擋其后的任何元素。
提示:背景應用于由內容和內邊距、邊框組成的區域。
內邊距、邊框和外邊距都是可選的,默認值是零。但是,許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。這可以分別進行,也可以使用通用選擇器對所有元素進行設置:
* { margin: 0; padding: 0; }
在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。
假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素,就需要將內容的寬度設置為 70 像素,請看下圖:

#box { width: 70px; margin: 10px; padding: 5px; }
提示:內邊距、邊框和外邊距可以應用于一個元素的所有邊,也可以應用于單獨的邊。
提示:外邊距可以是負值,而且在很多情況下都要使用負值的外邊距。
實例
演示框模型:
div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; }
元素的寬度和高度
為了在所有瀏覽器中正確設置元素的寬度和高度,您需要了解框模型如何工作。
重要提示:使用 CSS 設置元素的 width 和 height 屬性時,只需設置內容區域的寬度和高度。要計算元素的完整大小,還必須把內邊距、邊框和外邊距加起來。
實例
<div> 元素的總寬度將是 350px:
div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; }
計算如下:
320px(寬度) + 20px(左+右內邊距) + 10px(左+右邊框) + 0px(左+右外邊距) = 350px
元素的總寬度應該這樣計算:
元素總寬度 = 寬度 + 左內邊距 + 右內邊距 + 左邊框 + 右邊框 + 左外邊距 + 右外邊距
元素的總高度應該這樣計算:
元素總高度 = 高度 + 上內邊距 + 下內邊距 + 上邊框 + 下邊框 + 上外邊距 + 下外邊距