dev TailwindCSS

TailwindCSS gap space 違い｜どっちを使う？使い分けを解説

TailwindCSS gap space 違いを実例で解説。flex や grid で要素間の隙間を作るとき、どちらを使えばいいか迷いませんか？使い分けの基準を一緒に学びましょう。

要素の隙間、どうやって作っていますか？

flexで要素を横並びにしたとき、要素同士の間に隙間を作りたい——よくある場面ですよね。

TailwindCSSには gap と space-x / space-y という似たようなクラスがあります。

「どっちを使えばいいの？」と迷ったことはありませんか？

今回は、この2つの違いを一緒に勉強してみましょう。

私の体験談

その前に、私の体験談を紹介させてください。

私はこの記事を執筆するまで、space 系のクラスを知りませんでした。gap については「隙間を作るもの」という印象はあったものの、実際に何をしているのかはよく分かっていませんでした。

flexと一緒に使ってみたとき、ようやく効果を実感できました。でも、「じゃあ gap と space って何が違うの？」という疑問が残りました。

調べてみると、CSSレベルで仕組みが違うことが分かりました。その体験が、この記事を執筆するきっかけとなりました。

同じように悩んでいる方の役に立てれば嬉しいです。

結論：使い分けの基準

先に結論をお伝えします。

flex または grid を使っている？
  → YES → gap を使う
  → NO  → space-y / space-x を使う

flex/grid を使っているなら gap、そうでなければ space。 これが基本です。

flex/grid で space を使ってしまうと、折り返し時に意図しない空白が入るリスクがあります。詳しくは後述します。

本質的な違い

space gap
何をしているか 子要素に margin を付ける 親要素が間隔を管理する
使える場所 どこでも（flex/grid 不要） flex / grid のみ
CSSの実装 隣接セレクタで margin を付与 CSS gap プロパティ

私にとって理解の手助けになったのは「何をしているか」の部分でした。空白を管理する主語が変わっているんですよね。space は子要素が自分で margin を持ち、gap は親要素が間隔を管理する。この違いを意識すると、使い分けの理由が見えてきます。

公式ドキュメントはこちらです：

実際の違いを見てみよう

まずは Tailwind Play（v3）で実際の違いを確認してみましょう。

flex + space-x（問題あり）

<div class="flex flex-wrap space-x-4 w-32">
  <div class="bg-blue-500 text-white p-4 rounded">A</div>
  <div class="bg-blue-500 text-white p-4 rounded">B</div>
  <div class="bg-blue-500 text-white p-4 rounded">C</div>
  <div class="bg-blue-500 text-white p-4 rounded">D</div>
</div>
TailwindCSS flex + space-x の結果 折り返し時に問題あり
flex + space-x の結果
  • C が右にずれている（折り返し後の要素にも margin-left が付いている）
  • 行間に空白がない

flex + gap（正しい）

<div class="flex flex-wrap gap-4 w-32">
  <div class="bg-green-500 text-white p-4 rounded">A</div>
  <div class="bg-green-500 text-white p-4 rounded">B</div>
  <div class="bg-green-500 text-white p-4 rounded">C</div>
  <div class="bg-green-500 text-white p-4 rounded">D</div>
</div>
TailwindCSS flex + gap の結果 折り返しても正しく動作
flex + gap の結果
  • C, D が左端に揃っている
  • 行間にも空白がある（gap は縦横両方の間隔を管理してくれる）

CSSレベルの仕組み

なぜこのような違いが出るのでしょうか？Tailwind Play v3 の Generated CSS を確認してみましょう。

space-x の実態

TailwindCSS space-x-4 の Generated CSS
space-x-4 の Generated CSS
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

> :not([hidden]) ~ :not([hidden]) は「直前に兄弟要素がある子要素」に margin を付ける隣接セレクタです。--tw-space-x-reverse が 0 の場合、margin-left: 1rem が適用されます。

問題点: 隣接セレクタは折り返しを認識しないため、折り返し後の先頭要素（C）にも margin-left が付いてしまいます。

gap の実態

TailwindCSS gap-4 の Generated CSS
gap-4 の Generated CSS
.gap-4 {
  gap: 1rem;
}

親要素が子要素間の間隔を管理します。flex / grid コンテナでのみ有効ですが、折り返しても正しく動作します。

補足：flex/grid なしで space を使う場合

flex/grid を使わずに A, B, C, D を 2x2 のレイアウトで並べたい場合、どう書けばいいでしょうか？

結論：inline-block が必要

通常の div はブロック要素なので縦に積まれます。横に並べるには inline-block を使います。

<div class="space-y-4 w-32">
  <div class="space-x-4">
    <div class="inline-block bg-blue-500 text-white p-4 rounded">A</div>
    <div class="inline-block bg-blue-500 text-white p-4 rounded">B</div>
  </div>
  <div class="space-x-4">
    <div class="inline-block bg-blue-500 text-white p-4 rounded">C</div>
    <div class="inline-block bg-blue-500 text-white p-4 rounded">D</div>
  </div>
</div>
TailwindCSS flex/grid なしで space と inline-block を使った 2x2 レイアウト
flex/grid なしで space を使った 2x2 レイアウト

ポイント:

  • 行ごとに div で囲む
  • 子要素に inline-block を付けて横並びにする
  • 横方向は space-x、縦方向は space-y

inline-block とは

要素を「横に並べつつ、幅・高さ・パディングを指定できる」ようにする CSS プロパティです。

表示形式 横並び 幅・高さ指定
block（通常のdiv） ❌ ✅
inline ✅ ❌
inline-block ✅ ✅

結局、flex + gap の方がシンプル

flex/grid なしで 2x2 レイアウトを作るには、行ごとに div を分けて inline-block を使う必要があります。

一方、flex + gap なら：

<div class="flex flex-wrap gap-4 w-32">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

これだけで済みます。2x2 のようなレイアウトが必要なら、flex + gap を使う方がシンプルです。

まとめ

TailwindCSS gap space 違いを解説しました。

  • flex/grid を使っているなら gap を使う
  • flex/grid を使わないなら space-y / space-x を使う
  • flex/grid で space を使うと、折り返し時に問題が出る可能性がある

迷ったら gap を使えばOKです。

補足：TailwindCSS v3 と v4 の違い

調査の過程で、TailwindCSSのバージョンによって space-x の実装が異なることがわかりました。

v3 の実装

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 1rem;
}

margin-left を使用しているため、折り返し時に左端がずれる問題がありました。

v4 の実装

.space-x-4 :where(& > :not(:last-child)) {
  margin-inline-end: 1rem;
}

margin-inline-end（右マージン）を使用するように変更され、折り返し時の問題が解消されています。

v4 を使っている場合、折り返し時の問題は発生しにくくなっています。 ただし、flex/grid を使うなら gap の方がシンプルで分かりやすいという点は変わりません。

参考リンク

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）

-dev, TailwindCSS