網頁設計時 box-sizing 的觀念與實務用法

在網頁設計時，Bootstrap CSS 的盒模型（Box Model）中， box-sizing 是一個非常關鍵、卻常被忽略的觀念。 這篇用白話搭配小例子，帶你理解： 為什麼多數網頁設計專案會「全站改用 border-box」， 以及什麼情況下要「局部改回 content-box」。

---

一、為什麼要改 box-sizing？

為了讓網頁設計時的尺寸計算更直覺、更好控制， 實務上常會把全站的 box-sizing 從預設的 content-box 改成 border-box。

---

二、content-box 與 border-box 差在哪？

預設：content-box

width: 200px;
padding: 20px;
border: 5px;

實際寬度會變成：

• 200px（內容）
• + 40px（左右 padding）
• + 10px（左右 border）

= 250px

網頁設計實務上常出現「怎麼比想像的大」的狀況。

常用：border-box

box-sizing: border-box;
width: 200px;

• 200px 已包含 content + padding + border
• padding 不會把盒子撐大

對網頁設計排版非常友善，尺寸計算比較不容易出錯。

---

三、但為什麼網頁設計時 border-box 有時會有問題？

某些第三方套件（例如 Google Maps、Google 自訂搜尋） 是假設你使用 content-box。 如果全站強制改成 border-box， 可能會導致版面異常。

那該怎麼辦？

答案是：局部改回 content-box

• 只在真的需要時才改
• 針對特定元件處理，改回 content-box

.selector-for-some-widget {
  box-sizing: content-box;
}

實際案例：第三方元件

.google-map-wrapper {
  box-sizing: content-box;
}

結果會是：

• .google-map-wrapper
• 它裡面的所有子元素
• 包含 ::before / ::after

→ 全部回到 content-box
→ 不影響網頁設計時的其他頁面，乾淨俐落

為什麼只寫一行就夠？

因為子元素會繼承父層的 box-sizing， 不需要一個一個設定，非常省事。

---

四、實務上常見的網頁設計全站寫法

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

這樣的好處：

• 統一 box model
• 避免預設 margin / padding 搞事
• 結構可控、可覆寫、安全

寫法核心在這一行：

box-sizing: inherit;

html 定規則，所有元素自動跟著。
需要例外時，只改父層即可。

---

什麼叫「改父層」？

假設你的網頁設計有一個第三方元件區塊，例如地圖、外掛、舊套件：

<div class="map-wrapper">
  <div class="map"></div>
</div>

如果只有這一塊需要 content-box， 其他地方完全不動：

.map-wrapper {
  box-sizing: content-box;
}

就這一行，搞定。

---

五、總結 ✨

網頁設計實務上建議全站使用 box-sizing: border-box， 讓網頁設計版面好算、好控制； 若遇到第三方套件不相容， 再針對該元件局部改回 content-box。

記憶法：

用 html 定規則，用 inherit 傳下去，
需要例外時，只改那一塊。

雲林網頁設計推薦頂控網頁設計團隊