Tailwind CSS の gap と space の違いを徹底解説

Tailwind CSS の gap と space の違いを徹底解説

Tailwind CSS でレイアウトを組む際に、要素間の余白調整に頻繁に使われるのが gap と space というユーティリティクラスです。

一見似ていますが、それぞれ適用方法や使いどころが異なります。本記事では、2つのクラスの違いや、使い分け方について解説します。

1. gap とは？

gap は主にグリッド（grid）やフレックスボックス（flex）で使用される、コンテナ内の要素間の隙間を調整するプロパティです。

特徴

• 全方向に均一な間隔を設定する

  <div class="grid grid-cols-3 gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
  

• 水平・垂直方向に個別指定可能

  • 水平方向のみに間隔をつけたい場合は gap-x
  • 垂直方向のみに間隔をつけたい場合は gap-y

  <div class="flex gap-x-2 gap-y-4 flex-wrap">
    <div>Item A</div>
    <div>Item B</div>
    <div>Item C</div>
  </div>
  

• コンテナそのものにスタイルが適用されます。

2. space とは？

space は主にFlexboxまたは連続するブロック要素間に余白を設定するクラスで、子要素のマージンを自動で調整することで余白を作り出します。

特徴

• 子要素の間にのみマージンを追加（最後の子要素には適用されない）

  <div class="flex space-x-4">
    <div>Button 1</div>
    <div>Button 2</div>
    <div>Button 3</div>
  </div>
  

• 垂直方向には space-y、水平方向には space-x を利用

• 子要素自体にマージンが付くため、コンテナの幅を変更することはありません。

3. 使い分けのポイント

グリッドや柔軟なレイアウトには「gap」

グリッドやFlexboxで等間隔のレイアウトをシンプルに実装したい場合は gap を使います。特に複数方向に一括して余白を設定したい場合に便利です。

ボタンやリンクなどシンプルな並びには「space」

ボタンやリンクが並ぶ単純な構造では、子要素間にだけ余白を設定する space-x や space-y が便利です。

4. ブラウザ対応の注意点

• gap は、比較的新しいCSSプロパティのため、一部の古いブラウザでFlexboxとの併用がサポートされない可能性があります。
• space は Tailwind CSS が内部でマージンを割り当てる方式なので、ブラウザ間の互換性が高く、安心して使用できます。

まとめ

gap と space は用途に応じて使い分けることで、より柔軟で読みやすいレイアウトを実現します。プロジェクトの内容やサポートブラウザを考慮しながら最適なクラスを選んでいきましょう。