前言

今天我開始解說box model，尤其裡面結構部分盡量逐項弄清楚。
對我來說，這就像開始繪畫前要先搞清楚畫布範圍，整張畫布範圍多大？實際安裝到畫板呈現畫面又是多大？

定義

Box Model是CSS定義的元素「箱子」的結構模型，裡面包含四個主要部分：

• Content（內容）：元素的實際內容區域（文字、圖片等）。

• Padding（內距）：內容和邊框之間的空白區域。

• Border（邊框）：包裹內容和內距的邊框線。

• Margin（外距）：盒子外側的空白，用來隔離其他元素。

Box Model描述的是，瀏覽器如何計算元素佔據的空間。

(圖片取自維基)

結構介紹

Content 內容

內容區域包含元素的「真實」內容，例如文字、影像圖片。其範圍是內容(content-box)的寬度(width)和高度(height)組成。

當box-sizing屬性設定為content-box（通常為預設值）且為區塊元素（block element），可以使用 width、min-width、max-width、height、min-height 和 max-height 屬性明確定義內容區域的大小。

Padding 內距/內邊距

元素的padding area是其內容與邊框之間的空間。
內距區域，以內距邊緣為界，它會在原本的內容區域（content area）外部延伸空間，用來包含這個元素的內距（padding）。
它寬度與高度分別稱為 padding-box width和 padding-box height組成。

padding厚度是由 padding-top、padding-right、padding-bottom、padding-left 和 shorthand padding屬性所決定。

Border 邊框

邊框區域（border area，以邊框邊緣為界，它在內距區域（padding area）外延伸，用來包含padding area的邊框。
它的寬度與高度分別稱為 border-box width 和 border-box height。
CSS邊框屬性可以指定元素邊框的樣式、寬度和顏色。

Margin 外距/邊距

Margin area以邊距邊緣為界，會延伸邊距區域，簡單來說邊框之外的元素周圍建立Margin area，定義了元素邊距與周圍元素之間的距離，其尺寸為邊距框寬度和邊距框高度 。
邊距區域的大小是由 margin-top、margin-right、margin-bottom、margin-left 和 shorthand margin 屬性所決定。

實作時候在瀏覽器檢視會發現為何上下兩個box的邊距是重疊的，這是因為有**邊距重疊（margin collapsing）**發生。

邊距重疊 margin collapsing

元素的上邊距和下邊距有時會重疊成兩個元素邊距中最大的邊距，這代表邊距重疊（margin collapsing）發生。

既然提到它是有時會發生，代表它有一定的條件下才會出現：
（以下僅列出常見）

• 邊距重疊僅發生在頂部和底部邊距上，不會在左右邊距。

• 兩個元素皆是block且是in-flow狀態，並參與相同的區塊格式化上下文(Block Formatting Context，BFC)。

• 兩個區塊沒有padding、border、line box、clearance隔開時。

另外上面提到取最大邊距，意思是如下範例：

h1 {
  margin-bottom: 50px;
}

h2 {
  margin-top: 20px;
}

正常會以為兩個元素相加的垂直邊距是70px(50+20)，但因為邊距重疊取最大最大邊距，實際上垂直邊距是50px。

參考資料

Mdn
w3schools - CSS Tutorial