CSS 為什麼「8 的倍數」成為邊距的標準
· 2 分鐘閱讀
現代的 UI 設計中，「邊距設定為 8 的倍數」的規則被廣泛使用。這不僅僅是慣例，而是基於 螢幕密度、排版和比例的數學一致性所支持的經驗法則。
針對多種螢幕密度的應對
現代顯示器具有 1x、1.5x、2x、3x、4x 等像素比率。
| 值 | 1x | 1.5x | 2x | 3x | 4x |
|---|---|---|---|---|---|
| 8 px | 8 | 12 | 16 | 24 | 32 |
| 5 px | 5 | 7.5 ⚠️ | 10 | 15 | 20 |
8 可以在多種倍率下整除，因此不容易發生次像素渲染的模糊效果。如果使用像 5 px 這樣的值，在 1.5x 環境中會導致 7.5 px 的尾數，渲染會變得不準確。
與排版的相容性
瀏覽器的預設字體大小為 16 px (= 8 × 2)。行距通常也為 1.5 倍 = 24 px (= 8 × 3)。
使用 8 的倍數設置邊距，可以讓文本的節奏視覺上更一致。因為標題和正文的高度與邊距網格相一致，從而產生整齊的垂直節奏。
便於設計標記的創建
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
這樣的比例簡單，使設計師和工程師能更易於使用共同語言。Material Design 和 Tailwind CSS 也採用了這一思路。
設計師只需指定「這裡是 space-3」，工程師便能毫不猶豫地使用 24px。命名規則的統一降低了代碼評審時的溝通成本。
4 px 基礎的選擇
對於需要更細微調整的 UI，4 px 基礎 (4、8、12、16...) 也很常見。Tailwind CSS 預設採用 4 px 基礎 (p-1 = 4px)。
4 px 基礎也是 8 px 基礎的子集，因此兩者並不矛盾。可以在組件內部等細微的邊距使用 4 px 單位，在不同區域間等較大的邊距使用 8 px 單位進行區分，這樣的運用也很有效。
總結
8 px 的倍數作為邊距標準的原因可以歸納為三點。
- 應對螢幕密度: 在多種像素比率下能整除，防止次像素模糊。
- 與排版的一致性: 與預設字體大小 (16 px) 和行距 (24 px) 一致，產生垂直節奏。
- 比例的一致性: 簡單的標記體系成為設計師和工程師的共同語言。
載入中...