スペーシング — margin・padding・サイズの指定 - Tailwind CSS実践ガイド

TailwindのスペーシングはデフォルトでRemベースのスケールを使います。数値の意味を理解すると、一貫性のある余白を素早く指定できます。

学習者

p-4 の「4」って何の数字…？px？それとも別の単位なの？

その疑問はこの章の冒頭で解消します。結論から言うと 1 = 4px。まずはこの基準を押さえましょう。

スペーシングスケール

Tailwindの数値は 1 = 0.25rem = 4px が基準です。

クラス	rem	px相当
`p-1`	0.25rem	4px
`p-2`	0.5rem	8px
`p-4`	1rem	16px
`p-6`	1.5rem	24px
`p-8`	2rem	32px
`p-12`	3rem	48px
`p-16`	4rem	64px

padding の違い

p-2

p-4

p-8

数字が大きいほど余白が広がります。実務では p-4、p-6、gap-4、gap-6 あたりをよく使います。細かく調整しすぎるより、まずは既定のスケールに乗せる方がデザインの一貫性を保ちやすいです。

padding

<!-- 四辺すべて -->
<div class="p-4">...</div>
 
<!-- 上下・左右 -->
<div class="py-2 px-4">...</div>
 
<!-- 個別 -->
<div class="pt-4 pr-6 pb-4 pl-6">...</div>
 
<!-- 左右のみ（水平方向） -->
<div class="px-6">...</div>
 
<!-- 上下のみ（垂直方向） -->
<div class="py-3">...</div>

html

margin

<!-- 中央揃え（水平） -->
<div class="mx-auto w-full max-w-xl">...</div>
 
<!-- 上に余白 -->
<p class="mt-4">...</p>
 
<!-- 下に余白 -->
<h2 class="mb-2">...</h2>
 
<!-- 負のmargin -->
<div class="-mt-2">...</div>

html

gap と margin の使い分け

1つ目の項目

2つ目の項目

3つ目の項目

リストやカード内の縦並びには、個別の mt-* より gap-* が読みやすいことが多いです。親要素に flex flex-col gap-3 と書けば、子要素同士の間隔をまとめて管理できます。

サイズ（width / height）

<!-- 固定幅 -->
<div class="w-32">128px</div>    <!-- 8rem -->
<div class="w-64">256px</div>    <!-- 16rem -->
 
<!-- パーセント -->
<div class="w-1/2">50%</div>
<div class="w-full">100%</div>
 
<!-- ビューポート -->
<div class="w-screen h-screen">画面全体</div>
 
<!-- 最大・最小 -->
<div class="max-w-sm">最大384px</div>
<div class="max-w-prose">最大65ch（読みやすい本文幅）</div>
<div class="min-h-screen">最低でも画面の高さ</div>

html

任意の値

スケール外の値を使うには角括弧で指定します。

<div class="w-[480px] h-[360px]">...</div>
<div class="mt-[72px]">...</div>
<div class="p-[clamp(1rem,3vw,2rem)]">...</div>

html

ちゃんと使うためのポイント

1 = 4px のスケールを覚えると p-4（16px）や gap-6（24px）が直感的に使える
mx-auto + max-w-* でコンテンツの中央揃えと幅制限を同時にできる
スケール外の値は任意値（[]）で対応できる

次の章では、**テキストとフォント**のユーティリティを学びます。

Tailwind CSSクイズに挑戦するこの章で学んだTailwind CSSの知識を、4択クイズでアウトプットして定着させよう