第10章 Spacing
10.1 spacing スケールの思想
余白は、デザインの印象を最も大きく左右する要素のひとつです。素の CSS では padding: 16px のように好きな値を書けますが、第3章で見たとおり、この自由さがチーム開発では余白のばらつきを生みます。
Tailwind は、余白をスケール（段階的な値の並び）として提供します。そして v4 では、このスケールが第5章で見た --spacing というたった 1 つの基準値から計算されます。
/* p-4 が生成する CSS（簡略化） */
.p-4 { padding: calc(var(--spacing) * 4); }
--spacing の既定値は 0.25rem です。ルート文字サイズが16px なら4px に相当し、p-4 は 0.25rem × 4 = 1rem（16px）になります。数字は基準値の倍率です。v4 では p-4.5（18px）や p-3.25（13px）のような小数も使えます。生成できる値の範囲と、チームが採用する余白の段階は別です。「カード内は p-6」などの規約を決めて一貫性を保ちましょう。本章の px 換算はルート文字サイズ16px を前提とします。
10.2 padding
要素の内側の余白が padding です。クラスの形は方向ごとに分かれています。
<div class="p-4">全方向に内側余白</div>
<div class="px-6 py-3">左右に 6、上下に 3</div>
<div class="pt-8">上だけ 8</div>
p-*… 全方向（padding）px-*/py-*… 横（padding-inline）/ 縦（padding-block）pt-*pr-*pb-*pl-*… 上下左右の個別
v4 では、横方向が padding-left/right ではなく padding-inline という論理プロパティで生成される点も覚えておきましょう。これは「文字の流れる方向」に沿った指定で、日本語・英語のような左横書きでは左右に対応しますが、アラビア語のような右横書き（RTL）では自動で左右が反転します。多言語対応を見据えた設計です。文字方向に合わせて始端・終端を指定したいときは、論理プロパティ版の ps-*（始端）・pe-*（終端）も使えます。
なお、padding にマイナスの値はありません。内側余白を負にすることはできないからです。
10.3 margin と負のマージン
要素の外側の余白が margin です。形は padding と同じく m-* mx-* mt-* などです。padding と違い、margin にはマイナスがあります。
<div class="mt-6">上に外側余白</div>
<div class="-mt-2">上に負のマージン（上に食い込ませる）</div>
-mt-2 のように先頭に - を付けると負のマージンになります。重なりを作る、親の padding を打ち消す、といった用途で使います。ただし負のマージンはレイアウトを直感に反して崩しやすいので、多用は禁物です。「重ねたい」意図が明確なときだけに留めましょう。
10.4 要素間の間隔: space-x/y-* と gap-* の違い
「子要素どうしの間隔」を空けたい場面はとても多くあります。Tailwind には方法が 2 つあり、使い分けがよく問われます。
gap-*（推奨）: Flexbox や Grid のコンテナに付けて、子の間の溝を空けます。
<div class="flex gap-4">
<button>保存</button>
<button>キャンセル</button>
</div>
space-x-* / space-y-*: 隣り合う子要素の間に、片側マージンで間隔を入れます（隣接する要素どうしの間だけに溝ができるイメージです）。
<div class="space-y-4">
<p>段落1</p>
<p>段落2</p>
</div>
どちらを使うべきか。 現在は gap-* が第一候補です。gap は CSS Grid / Flexbox の正式な機能で、要素を折り返したときも間隔が正しく保たれ、子要素を入れ替えても破綻しません。space-* はマージンを使うため、子の順序や折り返しで意図せぬ余白が出ることがあります。Flex/Grid コンテナなら gap、それ以外でやむを得ないときだけ space-*、と覚えておけば十分です。
10.5 任意の値とスケール外の値
数値の倍率で表す方法と、値を直接指定する方法があります。
<div class="p-4.5">既定の --spacing の 4.5 倍（1.125rem）</div>
<div class="p-[18px]">文字サイズに連動しない 18px</div>
ルート文字サイズ16px では、どちらも18px です。ただし p-4.5 は --spacing とルート文字サイズに連動し、p-[18px] は固定値になります。18px は v4 の数値指定で表せるので、それだけで「スケール外」とは言えません。
どちらを使う場合も、チームが採用した余白の段階に沿うかを確認します。繰り返す役割に名前を付けたいなら、テーマ変数にまとめる方法もあります（第5章・第26章）。
10.6 実務: 一貫した余白設計とアンチパターン
実務では、「余白の値を決める」のではなく「余白の歩幅を決める」と考えると、設計がぶれません。たとえば「セクション間は py-16、カード内は p-6、要素間は gap-4」のように、役割ごとに使う値をチームで決めておきます。
避けたいアンチパターンは、画面ごとに余白がバラバラになることです。p-[13px]・mt-[7px]・gap-[5px] のような任意の値が散らばり始めたら、スケールから外れた設計の崩れを疑うべきサインです（詳しくは第27章）。