跳轉到

建立 2025-02-25 更新 2026-09-11

CSS 盒模型（Box Model）

瀏覽器把每個元素當成一層盒子來排。盒子由內而外是 content → padding → border → margin。寬高到底包不包 padding，由 box-sizing 決定。

盒模型示意：最外層是透明的 margin，接著是邊框 border，再進來是會畫背景的 padding，最內層才是 content

四個部分（Anatomy）

部分 作用 主要屬性
Content 文字、圖片、子元素 width、height、min/max-width
Padding 內容到邊框的距離，仍在背景裡 padding
Border 邊線 border
Margin 與其他盒子的距離，背景畫不到這裡 margin 
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #222;
  margin: 10px;
}

box-sizing

值 width / height 包含什麼 日常建議
content-box（初始值） 只有 content 心算很累
border-box content + padding + border 一律用這個

標準模式下，上面例子的佔寬是：

200 + 20×2 + 5×2 + 10×2 = 270px

（若把 margin 算進「佔版面」；相鄰垂直 margin 還可能合併，見下節。）

*,
*::before,
*::after {
  box-sizing: border-box;
}

設成 border-box 後，width: 200px 就是你在版面上看到的框寬（不含 margin）。Grid / Flex 裡比較不容易意外撐破欄位。

outline 不是盒子的一部分

outline 與 box-shadow 不佔布局空間，不會把鄰居推開。焦點環請用 outline 或 box-shadow，不要靠很厚的 border 硬擠。

Margin 合併（collapse）

兩個區塊在垂直方向的 margin 相遇時，通常取較大者，不是相加。

.heading { margin-bottom: 32px; }
.lead { margin-top: 16px; }
/* 中間空隙是 32px，不是 48px */

常見情況：

  • 相鄰兄弟的上下 margin
  • 父元素沒有 padding / border / overflow 時，子元素的上下 margin 會「漏」到父層外面

避免漏出的方法：給父層一點 padding、border，或使用 Flex / Grid（彈性與網格容器內不會垂直合併）。

水平 margin 不會合併。

視覺與佔位：overflow、visibility

內容比盒子大時：

.panel {
  max-height: 12rem;
  overflow: auto; /* 需要時才出現捲軸 */
}
屬性 隱藏後還佔空間？
display: none 否
visibility: hidden 是
opacity: 0 是，且仍可點到（除非再配 pointer-events: none）

總結

  1. 先想像四層盒子，再決定改的是內距還是外距。
  2. 專案開頭就設 box-sizing: border-box。
  3. 垂直 margin 會合併；用 Flex / Grid 排版時這個問題少很多。

接著把 margin 與 padding 的寫法練熟，再看 邊框與陰影。