盒模型與單位

每個 HTML 元素都是一個「盒子」，由四層結構組成：content（內容）、padding（內距）、border（邊框）、margin（外距）。理解盒模型是掌握 CSS 排版的基礎。

互動式盒模型

拖動滑桿調整 content、padding、border、margin 的大小，觀察盒子如何變化：

content
Content Padding Border Margin
Content 寬度
154px
元素總寬度（width）
200px
含 Margin 總寬度
232px
你設定的 width（200px）= content + padding + border。調整 padding 或 border 時，content 會自動縮小來維持總寬度不變。

CSS 單位比較

font-size: 16px

像素，絕對單位。不隨任何東西縮放。

小結

  • - 盒模型由 content、padding、border、margin 四層組成
  • - width 包含 content + padding + border，調整內距或邊框不會影響元素總寬度
  • - margin 是元素與其他元素之間的間距，不包含在 width 內
  • - 推薦使用 rem 作為主要單位，搭配 vw/vh 做響應式
下一課