深入理解 CSS Box Model ( 盒子模型 )

CSS Box Model 盒子模型是 CSS 的基礎，也是操控網頁非常重要的觀念，這篇文章將會深入理解 CSS Box Model，除了基本的認識，更會介紹網頁排版容易遇到的「邊距重疊 ( Collapsing margins ) 」問題，希望透過這篇文章，能對盒子模型有更深一層的認識。

Box Model 的定義

Box Model 主要由四個部分主成，由內而外分別是 Content ( 內容 )、Padding ( 內邊距 )、Border ( 邊框 ) 和 Margin ( 外邊距 )。( 圖片來源 csswg.org )

撰寫語法

除了 Content，Padding、Border 和 Margin 都有相同定義寬度的撰寫語法，撰寫的方法可分為下列幾種，單位可以設定為像素 px、百分比 % 或 em、rem 等。

• 四個值：上、右、下、左
• 三個值：上、左右、下
• 兩個值：上下、左右
• 一個值：上下左右

Margin

margin 是 box model 的外邊距，用法上有幾個重點：

• margin 的背景永遠是透明的。
• 如果是 inline 元素，margin 的垂直方向 ( 上、下 ) 沒有效果。
• 大小可使用 px rem...等單位，也可以設定 auto 讓網頁自動計算。
• 大小若設定 %，則是以以 父元素的寬度 作為計算標準。
• 大小可以是負值，設定負值會依據排版的方式，而有位置上的變化。

舉例來說，在一個寬度為 200px 的 div 裡放入兩個 div，設定第二個 div 的margin-top為 -10%，則第二個 div 就會向上移動 20px ( 200x(-0.1)=-20 )。

範例：margin 設定負值以及 %

Margin 邊距重疊 ( Collapsing margins )

margin 有一個很重要的特性，叫做「邊距重疊 Collapsing margins」，意思是兩個或多個元素 ( 父子、兄弟 ) 的「垂直邊距，會自動組合成單個邊距」，以這種方式組合成的邊距稱為重疊，生成的邊距稱為重疊邊距，重疊邊距 採用最大的 margin 值，此外，如果元素本身高度為 0 或 auto，則會發生上下 margin 重疊狀況。

不過在下列的情形中，元素「不會」發生邊距重疊：

• 「父元素」有設定 padding 或 border 的寬度。
• 水平邊距不會重疊。
• 屬於「不同的 BFC 內」的元素 ( 什麼是 BFC？ )，例如：
  • position 使用 absolute、fixed 的元素。
  • 元素間穿插了 BFC 元素，例如 inline、table...等。
  • display 屬性為 inline-block、table-cell、table-caption 的元素。
  • display 屬性為 flex、inline-flex、grid、inline-grid 的元素。

下面幾個例子，會充分展示邊距重疊和不會邊距重疊的情形。

• 範例 1、父子元素邊距重疊

  在這個例子中，兩個 div 為父子元素，在沒有設定 border 的狀態下，可以看到兩個 div 之間的垂直 margin 失去作用，發生邊距重疊現象，只剩下水平的 margin 有效果，但如果設定了 border，margin 的效果就會正常顯示。

  範例：父子元素邊距重疊

• 範例 2、兄弟元素邊距重疊

  在這個例子裡，如果是兩個兄弟階層的 div，他們是屬於同一個 BFC 內的元素，因此會發生邊距重疊現象 ( margin 都設定 20px，預期應該要是 40px，但呈現出來卻只有 20px )，不過如果將其中一個的 display 設定為 inline-block，就會創建一個 BFC，也因此就不會發生邊距重疊，同理，如果在兩個 div 中間穿插一個 span，也不會發生邊距重疊。

  範例：兄弟元素邊距重疊

Padding

padding 是 box model 的內邊距，用法上有幾個重點：

• 屬於填充區域，背景色依據元素的背景色而定。
• 會受到 box-sizing 影響 ( 設定 border-box 時表示內邊距包含在寬度內 )。
• 大小可使用 px rem...等單位，也可以設定 auto 讓網頁自動計算。
• 大小若設定 %，則是以以父元素的寬度作為計算標準。
• 不可設定為負值。

舉例來說，有兩個寬度同樣為 200px 的 div，padding 都設定為 20px，有設定 box-sizing 為 border-box 的寬度仍舊是 200px，沒有設定的則是 240px ( 200 + 20 + 20 )。

範例：padding 和 box-sizing

Border

border 是 box model 的邊框，用法上有幾個重點：

• 會受到 box-sizing 影響 ( 設定 border-box 時表示邊框包含在寬度內 )。
• 大小可使用 px rem...等單位，也可以設定 auto 讓網頁自動計算。

border 的寬度是從 padding 的邊界往延伸，下圖可以清楚看出有 box-sizing 為 border-box 和 content-box ( 預設值 ) 的影響，如果是 content-box，則內容 content 寬度不變，padding 和 border 往外延伸，如果設定為 border-box，則 border 和 padding 會往內延伸，border 的邊界會和原本的 content 邊界 ( 沒有設定 padding 和 border ) 相同。

參考

• https://drafts.csswg.org/css2/box.html
• https://www.w3.org/TR/css-box-3/