余白

PreviousNext

デザインにおける余白とは、レイアウト内の要素間の空き領域やギャップを、情報伝達を明確にするために意図的に使用することを指します。

4px グリッドをベースとしたスペーシングシステムです。Tailwind の p-*、m-*、gap-*、space-* ユーティリティで使用します。

TokenVisualValue
0
0px
px
1px
0.5
2px
1
4px
1.5
6px
2
8px
2.5
10px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px

使い方

// padding
<div className="p-4" />     // 16px 全方向
<div className="px-6 py-4" /> // 水平 24px / 垂直 16px
 
// margin
<div className="mt-8" />    // 上 32px
 
// gap（Flex / Grid）
<div className="flex gap-3" />   // 12px
<div className="grid gap-4" />   // 16px

使い分けガイド

用途推奨値説明
アイコンとテキストの間gap-1.5 / gap-26〜8px
フォームフィールド間gap-416px
カード内パディングp-4 / p-616〜24px
セクション間マージンpy-12 / py-1648〜64px
ページ横パディングpx-4 lg:px-8レスポンシブ

ルール

  • 4px の倍数（0.5, 1, 1.5, 2, 3, 4...）を使います。
  • 5（20px）や 7（28px）は Tailwind に存在しますが、グリッドが崩れるため原則避けます。
  • px（1px）は border や divider の視覚調整のみに使います。
  • 直値（p-[13px] 等）は使いません。