什麼是 Box 模型

邊緣

瀏覽器為 HTML 文件中的每個元素建立一個矩形。Box 模型描述瞭如何將填充，邊框和邊距新增到內容以建立此矩形。

從圖 CSS2.2 工作草案

四個區域中的每一個的周長稱為邊緣。每條邊都定義一個盒子。

• 最裡面的矩形是內容框。其寬度和高度取決於元素的渲染內容（文字，影象和它可能具有的任何子元素）。
• 接下來是填充框，由 padding 屬性定義。如果沒有定義 padding 寬度，則填充邊緣等於內容邊緣。
• 然後我們有邊框框，由定義 border 屬性。如果沒有定義 border 寬度，則邊框邊緣等於填充邊緣。
• 最外面的矩形是邊距框，由 margin 屬性定義。如果沒有定義 margin 寬度，則邊緣邊緣等於邊界邊緣。

例

div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;
}

這個 CSS 將所有 div 元素設定為寬度為 5px 的頂部，右側，底部和左側邊框; 50px 的頂部，右側，底部和左側邊緣; 和 20px 的頂部，右側，底部和左側填充。忽略內容，我們生成的框將如下所示：

Google Chrome 的元素樣式面板的螢幕截圖

• 由於沒有內容，內容區域（中間的藍色框）沒有高度或寬度（0px×0px）。
• 預設情況下，填充框與內容框的大小相同，加上我們在上面使用 padding 屬性定義的所有四條邊上的 20px 寬度（40px 乘 40px）。
• 邊框與填充框的大小相同，加上我們在上面定義的 5px 寬度與 border 屬性（50px 乘 50px）。
• 最後邊距框的大小與邊框相同，加上我們在上面用 margin 屬性定義的 50px 寬度（給我們的元素總大小為 150px×150px）。

現在讓我們給我們的元素一個同樣風格的兄弟。瀏覽器檢視兩個元素的 Box 模型，以確定新元素應該與前一個元素的內容相關的位置：

每個元素的內容由 150px 間隙分開，但兩個元素的盒子相互接觸。

如果我們然後修改我們的第一個元素沒有右邊距，右邊距邊緣將與右邊框邊緣相同，我們的兩個元素現在看起來像這樣：