CSS 單位 (Units)

CSS 提供多種單位來設定元素的大小、間距、字體等數值。單位主要分為「絕對單位」和「相對單位」兩大類。

絕對單位

絕對單位的大小是固定的，不會隨著其他因素改變。

單位說明
px像素 (pixel)，最常用的絕對單位
cm公分
mm公釐
in英吋 (1in = 96px = 2.54cm)
pt點 (1pt = 1/72 in)

px（像素）

px 是網頁設計最常用的單位，1px 對應螢幕上的一個像素點。

.box {
  width: 200px;
  height: 100px;
  font-size: 16px;
}

相對單位

相對單位的大小會根據參照對象而改變，更適合用於響應式設計。

em

em 相對於「元素本身」的 font-size，常用於 padding、margin 等。

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;    /* 16px × 1.5 = 24px */
  padding: 1em;        /* 24px（使用元素自己的 font-size） */
}
em 用於 font-size 時，參照的是「父元素」的 font-size；用於其他屬性時，參照的是「元素自己」的 font-size。

rem

rem (root em) 相對於「根元素」(<html>) 的 font-size，避免了 em 的巢狀計算問題。

html {
  font-size: 16px;  /* 瀏覽器預設通常是 16px */
}

.box {
  font-size: 1.5rem;   /* 16px × 1.5 = 24px */
  padding: 1rem;       /* 16px */
  margin: 2rem;        /* 32px */
}

rem 的優點是計算簡單，所有元素都參照同一個基準值。

%（百分比）

百分比相對於「父元素」的對應屬性值。

.parent {
  width: 800px;
  font-size: 20px;
}

.child {
  width: 50%;         /* 800px × 50% = 400px */
  font-size: 80%;     /* 20px × 80% = 16px */
}

不同屬性的百分比參照對象：

  • width：參照父元素的 width
  • height：參照父元素的 height
  • padding、margin：參照父元素的 width（即使是上下方向）
  • font-size：參照父元素的 font-size

vw 和 vh（視窗單位）

相對於瀏覽器視窗 (viewport) 的大小。

  • vw：視窗寬度的 1%
  • vh：視窗高度的 1%
  • vmin：vw 和 vh 中較小的值
  • vmax：vw 和 vh 中較大的值
/* 滿版區塊 */
.hero {
  width: 100vw;
  height: 100vh;
}

/* 響應式字體 */
h1 {
  font-size: 5vw;  /* 字體大小隨視窗寬度縮放 */
}

單位選擇建議

用途建議單位
字體大小rem
內距、外距rem 或 em
固定大小元素px
響應式寬度% 或 vw
滿版區塊vw、vh
邊框px
media query 斷點px 或 em

單位換算範例

假設根元素 font-size 為 16px：

html { font-size: 16px; }

/* 以下都等於 24px */
.example {
  font-size: 24px;
  font-size: 1.5rem;      /* 16 × 1.5 = 24 */
  font-size: 150%;        /* 繼承值 × 150% */
}

無單位數值

某些屬性可以使用無單位的數值：

.text {
  line-height: 1.5;    /* 字體大小的 1.5 倍 */
  opacity: 0.8;        /* 0 到 1 之間 */
  z-index: 100;        /* 整數 */
  flex-grow: 1;        /* 比例值 */
}

line-height 使用無單位數值是推薦的做法，因為子元素會繼承這個比例，而不是計算後的固定值。

/* 推薦 */
body {
  font-size: 16px;
  line-height: 1.5;  /* 子元素的 line-height 會是各自 font-size 的 1.5 倍 */
}

/* 不推薦 */
body {
  font-size: 16px;
  line-height: 24px;  /* 子元素會繼承固定的 24px */
}