CSS ではなぜ「8 の倍数」が余白の基準になるのか

2026年4月12日 · 約3分

現代の UI デザインでは「余白は 8 の倍数で設定する」というルールがよく用いられる。これは単なる慣習ではなく、画面密度・タイポグラフィ・スケールの数学的整合性に裏付けられた経験則である。

多くの画面密度への対応

現代のディスプレイは 1x・1.5x・2x・3x・4x などの pixel ratio を持っている。

値	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 を当てられる。命名規則が整うことで、コードレビュー時のコミュニケーションコストも下がる。

より細かい調整が必要な UI では 4 px ベース (4, 8, 12, 16...) も一般的である。Tailwind CSS はデフォルトで 4 px ベース (p-1 = 4px) を採用している。

4 px ベースは 8 px ベースの部分集合でもあるため、両者は矛盾しない。コンポーネント内部など細かな余白には 4 px 単位を使い、セクション間など大きな余白には 8 px 単位を使うといった使い分けも有効である。

8 px の倍数が余白の基準として使われる理由は 3 点に集約される。