Tailwind CSS spacing utilities 完全ガイド - padding/margin 基礎を6問で習得

Tailwind CSS spacing utilities（スペーシングユーティリティ）の基本である padding と margin を、公式ドキュメントに基づく6つの実践問題で完全習得。p-4、px-、py-、m-、mx-、my-* の使い分けから、スペーシングスケールの計算方法、企業サイトで使われる実践パターンまで、初心者が迷いやすいポイントを徹底解説します。

Contents

1 読者がこの記事から得られる知識
2 今回ハンズオンした内容
3 ハンズオンの中で私が疑問に感じた点や失敗した点
4 今回のまとめ
5 関連記事

読者がこの記事から得られる知識

この記事では、Tailwind CSS spacing utilities（スペーシングユーティリティ）の基本概念を実践的に学びます。CSSフレームワークを初めて使う方でも、padding と margin の違いから、実務で頻繁に使うクラスの組み合わせ方まで、段階的に理解できる内容になっています。

この記事を読むことで、以下の知識が得られます：

Tailwind CSS の padding/margin ユーティリティクラスの基本的な使い方
p-*、px-*、py-*、m-*、mx-*、my-* の方向指定の違いと使い分け
スペーシングスケール（4 = 1rem = 16px）の計算方法と実際の適用
企業サイトのボタン、カード、ナビゲーションで使われる実践的なスペーシングパターン
クラスの上書きルールと、意図しない結果を避けるためのベストプラクティス
https://play.tailwindcss.com/ を使った効果的な学習方法

最終的には、Tailwind CSS の spacing utilities を自信を持って使いこなし、レスポンシブで美しいUIコンポーネントを効率的に作成できるようになります。

今回ハンズオンした内容

今回は、Tailwind CSS 公式ドキュメント（https://tailwindcss.com/docs/padding、https://tailwindcss.com/docs/margin）を参照しながら、spacing utilities の基礎を実践的に学習しました。CSS フレームワーク Tailwind CSS のユーティリティクラスを使って、padding と margin の基本的な方向指定をマスターすることが目標です。

学習には https://play.tailwindcss.com/ を使用し、コードを書いて即座に結果を確認できる環境で進めました。npm パッケージインストールや watch モード自動ビルドのセットアップは不要で、ブラウザだけで完結する学習方法です。

ハンズオンで学習したコードと結果の画像

先にハンズオンで書いたコード全体を紹介しておきます。

<div class="basic-1-container">
  <div class="bg-blue-500 p-4">Hello</div>
</div>
<div class="basic-2-container">
  <div class="bg-green-500 px-8">Welcome</div>
</div>
<div class="basic-3-container">
  <div class="bg-red-500 my-6">Goodbye</div>
</div>
<div class="basic-1-container">
  <div class="bg-blue-600 px-5 py-3 text-white">お問い合わせ</div>
</div>
<div class="basic-2-container">
  <div class="px-6 py-6 mb-4 bg-white border">サービス紹介</div>
</div>
<div class="basic-3-container">
  <div class="py-2 px-4 mx-1 bg-gray-200">会社概要</div>
</div>

画像も添付しておきます。Tailwind PLAYでスクショしました。

学習の全体構成

今回の学習は以下の流れで進めました：

学習フロー
├── 基礎問題（3問）
│   ├── 問題1: 全方向 padding の適用
│   ├── 問題2: 左右 padding の適用
│   └── 問題3: 上下 margin の適用
└── 実践問題（3問）
    ├── 問題1: ボタンコンポーネント（padding の組み合わせ）
    ├── 問題2: カードコンポーネント（padding + margin）
    └── 問題3: ナビゲーションメニュー（複数方向の spacing）

ステップ1: 公式ドキュメントで基礎を確認

確認した内容

Tailwind CSS 公式ドキュメントの padding と margin のページにアクセスし、基本的なユーティリティクラスの構文を確認しました。

アクセスしたURL:
- https://tailwindcss.com/docs/padding
- https://tailwindcss.com/docs/margin

確認することの意図

公式ドキュメントには、各ユーティリティクラスの使用例、スペーシングスケール、方向指定の方法が詳しく解説されています。実際にコードを書く前に、公式の情報をもとに正しい使い方を理解することで、試行錯誤の時間を減らし、効率的に学習を進めるためです。

実行結果

公式ドキュメントから以下の重要な情報を確認できました：

p-*: 全方向の padding
px-*: 左右の padding
py-*: 上下の padding
m-*: 全方向の margin
mx-*: 左右の margin
my-*: 上下の margin
スペーシングスケール: *-4 = 1rem = 16px を基準とする

実行結果の解説

Tailwind CSS の spacing utilities は、方向を示すプレフィックス（p, px, py, m, mx, my）と、サイズを示す数値（1〜96）を組み合わせて使用します。数値は 0.25rem 単位で計算され、4 が 1rem（16px）に相当します。

これで基本的な構文とスペーシングスケールの仕組みが理解できました。

ステップ2: 基礎問題1 - 全方向 padding の適用

実行するコマンドと操作

https://play.tailwindcss.com/ にアクセスし、以下のコードを入力しました。

<div class="p-4 bg-blue-500">Hello</div>

コマンドと操作の意味

p-4: 全方向（top, right, bottom, left）に 1rem（16px）の padding を適用
bg-blue-500: 背景色を青に設定（padding の効果を視覚的に確認するため）

コマンドと操作を実行する意図

padding の最も基本的な使い方である「全方向に同じ値を適用する」パターンを理解するためです。

実行結果

青い背景の中に「Hello」というテキストが表示され、テキストの周囲に均等な余白（16px）ができました。

実行結果の解説

p-4 クラスを使うことで、CSS の padding: 1rem; と同じ効果が得られます。Tailwind CSS では、4つの方向すべてに同じ padding を適用したい場合、p-* という簡潔なクラス名だけで実現できるのが特徴です。

これで全方向 padding の基本が理解できましたね。

ステップ3: 基礎問題2 - 左右 padding の適用

実行するコマンドと操作

次に、左右だけに padding を適用するコードを入力しました。

<div class="bg-green-500 px-8">Welcome</div>

コマンドと操作の意味

px-8: 左右（horizontal）に 2rem（32px）の padding を適用
py-* は使用していないため、上下には padding なし

コマンドと操作を実行する意図

方向を限定した padding の適用方法を理解し、p-* との違いを体感するためです。

実行結果

緑の背景の中に「Welcome」というテキストが表示され、左右にだけ余白（32px）ができました。上下には余白がありません。

実行結果の解説

px-8 は CSS の padding-left: 2rem; padding-right: 2rem; と同じ効果です。ボタンやタブメニューなど、左右の余白だけが必要なUIコンポーネントでよく使われるパターンです。

これで方向を限定した padding の使い方が理解できましたね。

ステップ4: 基礎問題3 - 上下 margin の適用（スペーシングスケールの理解）

実行するコマンドと操作

margin を使った問題に挑戦しました。最初は誤って my-12 と入力してしまいました。

<!-- [誤] 最初の回答 -->
<div class="bg-red-500 my-12">Goodbye</div>

<!-- [正] 修正後の回答 -->
<div class="bg-red-500 my-6">Goodbye</div>

コマンドと操作の意味

my-6: 上下（vertical）に 1.5rem（24px）の margin を適用
要件は 24px だったが、my-12 は 3rem（48px）になってしまう

コマンドと操作を実行する意図

margin の使い方を学ぶとともに、スペーシングスケールの計算方法を正確に理解するためです。

実行結果

実行結果の解説

ここで重要なのは、Tailwind CSS のスペーシングスケールの計算方法です：

数値 1 = 0.25rem = 4px
数値 4 = 1rem = 16px
数値 6 = 1.5rem = 24px
数値 12 = 3rem = 48px

24px が必要な場合、16px × 1.5 = 24px なので、1rem × 1.5 = 1.5rem となり、数値は 6 になります。この計算方法を理解することで、今後はスムーズに適切なクラスを選択できるようになります。

これで margin の基本とスペーシングスケールの理解ができましたね。

ステップ5: 実践問題1 - ボタンコンポーネント（padding の組み合わせ）

実行するコマンドと操作

企業サイトでよく見るボタンを作成しました。最初は padding の組み合わせ方を誤解していました。

<!-- [誤] 最初の試み -->
<div class="bg-blue-600 p-3 px-2 text-white">お問い合わせ</div>
<!-- または -->
<div class="bg-blue-600 px-2 p-3 text-white">お問い合わせ</div>

<!-- [正] 正しいアプローチ -->
<div class="bg-blue-600 px-5 py-3 text-white">お問い合わせ</div>

コマンドと操作の意味

要件: 上下 12px、左右 20px の padding
[誤] p-3 px-2 または px-2 p-3: クラスの上書きにより意図しない結果に
[正] py-3 px-5: 上下と左右を個別に指定

コマンドと操作を実行する意図

複数の方向に異なる padding を適用する方法と、Tailwind CSS のクラス上書きルールを理解するためです。

実行結果

実行結果の解説

ここでの重要な学びは、Tailwind CSS では後に書いたクラスが優先されるということです。px-2 p-3 と書くと、最終的に p-3 が全方向に適用され、左右も 12px になってしまいます。

複数の方向に異なる値を適用したい場合は、py-* と px-* のように、重複しない方向指定を使う必要があります。または、計算してから直接 p-* の値を指定します（上下12px + 左右20px → py-3 px-5）。

これで実務的な padding の組み合わせ方が理解できましたね。

ステップ6: 実践問題2 - カードコンポーネント（padding + margin）

実行するコマンドと操作

企業サイトのカード型UIを作成しました。最初は margin のスケールを間違えました。

<!-- [誤] 最初の回答 -->
<div class="px-6 py-6 mb-10 bg-white border">サービス紹介</div>

<!-- [正] 修正後の回答 -->
<div class="px-6 py-6 mb-4 bg-white border">サービス紹介</div>
<!-- または -->
<div class="p-6 mb-4 bg-white border">サービス紹介</div>

コマンドと操作の意味

要件: 全方向 24px の padding、下に 16px の margin
[誤] mb-10: 2.5rem = 40px（要件より大きい）
[正] mb-4: 1rem = 16px（要件通り）

コマンドと操作を実行する意図

padding と margin を組み合わせて使う方法と、再度スペーシングスケールの正確な理解を確認するためです。

実行結果

実行結果の解説

カード型コンポーネントでは、padding で内側の余白を作り、margin で他のカードとの間隔を作るのが一般的なパターンです。

また、px-6 py-6 と書いても p-6 と同じ結果になりますが、p-6 の方がシンプルで読みやすいコードになります。ただし、後から片方だけ変更する可能性がある場合は、最初から px-* と py-* を分けて書いておくのも一つの方法です。

これで padding と margin を組み合わせた実践的なコンポーネントの作り方が理解できましたね。

ステップ7: 実践問題3 - ナビゲーションメニュー（複数方向の spacing）

実行するコマンドと操作

企業サイトのナビゲーションメニュー項目を作成しました。

<div class="py-2 px-4 mx-1 bg-gray-200">会社概要</div>

コマンドと操作の意味

py-2: 上下に 0.5rem（8px）の padding
px-4: 左右に 1rem（16px）の padding
mx-1: 左右に 0.25rem（4px）の margin
3つの方向指定を組み合わせて使用

コマンドと操作を実行する意図

実際のUIコンポーネントでは、padding と margin を複数の方向で組み合わせて使うことが多いため、その実践的な使い方を習得するためです。

実行結果

グレーの背景を持つナビゲーション項目が表示され、以下の余白が適用されました：

内側の上下: 8px（クリックしやすいサイズを確保）
内側の左右: 16px（テキストが詰まらないように）
外側の左右: 4px（隣接する項目との間隔）

実行結果の解説

ナビゲーションメニューでは、padding でクリッカブルエリアを広げ、margin で隣接する項目との間隔を作ります。このパターンは、タブメニュー、ページネーション、タグリストなど、水平方向に並ぶUI要素で頻繁に使われます。

py-2 px-4 mx-1 のように3つのクラスを組み合わせることで、複雑なCSSを書くことなく、実用的なUIコンポーネントを簡潔に実現できます。

ハンズオンの中で私が疑問に感じた点や失敗した点

疑問1: padding のクラスを2つ書いたら、どちらが優先されるの？

最初、「p-3 px-2 と書けば、全方向12pxの上に左右8pxが追加されて、左右だけ20pxになるのでは？」と思っていました。

実際の動作

Tailwind CSS では、後に書いたクラスが優先されます。つまり：

px-2 p-3: 最終的に全方向12px（p-3 が px-2 を上書き）
p-3 px-2: 最終的に全方向12pxだが、左右は8px（px-2 が p-3 の左右を上書き）

どちらも意図した結果（全方向12px、左右20px）にはなりません。

正しいアプローチ

複数の方向に異なる値を適用したい場合は、重複しない方向指定を使います：

<!-- [正] 上下と左右を個別に指定 -->
<div class="py-3 px-5">...</div>

<!-- [誤] 全方向と一部方向を混ぜる -->
<div class="p-3 px-2">...</div>

この理解ができると、意図しない余白が発生するトラブルを避けられます。

疑問2: スペーシングスケールの数値って、どうやって計算するの？

「24pxの padding が欲しいとき、どの数値を使えばいいの？」という疑問が最初にありました。

計算方法

Tailwind CSS のスペーシングスケールは、4 = 1rem = 16px を基準にしています：

必要なpx値を16で割る: 24px ÷ 16px = 1.5
1.5rem を得るための数値を計算: 1.5 ÷ 0.25 = 6
したがって、24px = *-6

覚えておくと便利な対応表

px	rem	クラス番号
4px	0.25rem	1
8px	0.5rem	2
12px	0.75rem	3
16px	1rem	4
20px	1.25rem	5
24px	1.5rem	6
32px	2rem	8

よく使う値は暗記してしまうと、コーディングが早くなります。

疑問3: `px-6 py-6` と `p-6` って、何が違うの？

「同じ結果になるなら、どっちを使えばいいの？」という疑問がありました。

結果は同じだが、使い分けのポイントがある

<!-- 結果は同じ -->
<div class="p-6">...</div>
<div class="px-6 py-6">...</div>

使い分けの判断基準

全方向同じ値の場合: p-6 を使う（シンプル）
後から変更する可能性がある場合: px-6 py-6 を使う（柔軟性）
レスポンシブ対応する場合: px-6 py-6 を使い、ブレークポイントごとに変更

例えば、モバイルとデスクトップで上下の padding だけ変えたい場合：

<!-- 上下だけレスポンシブに変更できる -->
<div class="px-6 py-4 md:py-8">...</div>

<!-- p-* だと全方向変わってしまう -->
<div class="p-4 md:p-8">...</div>

この使い分けを理解すると、メンテナンスしやすいコードが書けます。

今回のまとめ

お疲れ様でした！Tailwind CSS spacing utilities の基礎を、6つの実践問題を通じて習得しました。

今回学習したことは以下の3点です：

Tailwind CSS utility classes の方向指定: p-*（全方向）、px-*（左右）、py-*（上下）、m-*（全方向）、mx-*（左右）、my-*（上下）の使い分けと、CSS フレームワーク Tailwind での効率的なスペーシング管理方法
spacing scale の計算方法: 4 = 1rem = 16px を基準とした Tailwind spacing utilities のスケール計算と、実務で頻繁に使う値（8px = *-2、12px = *-3、24px = *-6）の覚え方
実践的なパターン: 企業サイトのボタン（py-* px-*）、カード（p-* mb-*）、ナビゲーション（py-* px-* mx-*）で使われる padding/margin の組み合わせ方と、クラス上書きルールに基づくベストプラクティス

また別の記事でお会いしましょう！

この記事で紹介した内容の他にも学習した内容を記事にしています。是非、ご覧になってみて下さい。

: Tailwind CSS flex items-center justify-center 完全ガイド - 実践的な中央揃えテクニック

Tailwind CSS flex items-center justify-center（中央揃え）の使い方を、基礎から実践まで6つの演習問題で完全マスター。企業サイトでよく使うヘッダーナビ、カード ...

続きを見る

: Tailwind CSS spacing utilities 完全ガイド - padding/margin 基礎を6問で習得

Tailwind CSS spacing utilities（スペーシングユーティリティ）の基本である padding と margin を、公式ドキュメントに基づく6つの実践問題で完全習得。p-4、 ...

続きを見る

: Tailwind CSS Width Height 完全ガイド - 基礎から実践まで10問で習得

Tailwind CSS width height utilities（幅・高さユーティリティ）の基本から実践的な使い方まで、10問の演習問題で体系的に学べる完全ガイド。固定値・相対値・分数値の使い分 ...

続きを見る

: 【実践10問】Tailwind CSS bg text color で背景色・テキスト色を完全習得

Tailwind CSS bg text color（背景色・テキスト色）のユーティリティを、基礎5問＋実践5問のハンズオン形式で完全解説。bg-, text- の基本パターンから企業サイトでの実践的 ...

続きを見る

: Tailwind CSS rounded shadow ring を実践ハンズオン｜角丸・影・リングの基礎から応用まで

Tailwind CSS rounded shadow ring のユーティリティクラスを基礎から実践まで10問のハンズオンで完全理解。border・bg・opacity との組み合わせや、hove ...

続きを見る

Tailwind CSS spacing utilities 完全ガイド - padding/margin 基礎を6問で習得

読者がこの記事から得られる知識

今回ハンズオンした内容

ハンズオンで学習したコードと結果の画像

学習の全体構成

ステップ1: 公式ドキュメントで基礎を確認

ステップ2: 基礎問題1 - 全方向 padding の適用

ステップ3: 基礎問題2 - 左右 padding の適用

ステップ4: 基礎問題3 - 上下 margin の適用（スペーシングスケールの理解）

ステップ5: 実践問題1 - ボタンコンポーネント（padding の組み合わせ）

ステップ6: 実践問題2 - カードコンポーネント（padding + margin）

ステップ7: 実践問題3 - ナビゲーションメニュー（複数方向の spacing）

ハンズオンの中で私が疑問に感じた点や失敗した点

疑問1: padding のクラスを2つ書いたら、どちらが優先されるの？

疑問2: スペーシングスケールの数値って、どうやって計算するの？

疑問3: px-6 py-6 と p-6 って、何が違うの？

今回のまとめ

関連記事

Tailwind CSS flex items-center justify-center 完全ガイド - 実践的な中央揃えテクニック

Tailwind CSS spacing utilities 完全ガイド - padding/margin 基礎を6問で習得

Tailwind CSS Width Height 完全ガイド - 基礎から実践まで10問で習得

【実践10問】Tailwind CSS bg text color で背景色・テキスト色を完全習得

Tailwind CSS rounded shadow ring を実践ハンズオン｜角丸・影・リングの基礎から応用まで

疑問3: `px-6 py-6` と `p-6` って、何が違うの？