TailwindCSS Space & Margin 完全ガイド

🧠 まず最初に: --spacing 変数とは？

すべての数値ベースクラスの基盤

      /* TailwindCSS v4 のデフォルト設定 */

      :root {

        --spacing: 0.25rem; /* = 4px */

      }

      /* mt-4 は以下に展開される: */

      margin-top: calc(var(--spacing) * 4);

      /*         = calc(0.25rem * 4)  */

      /*         = 1rem = 16px        */

💡 ポイント: --spacing は 0.25rem (4px) がデフォルト。数値を掛け算して実際のサイズが決まるので、mt-1 = 4px、mt-2 = 8px、mt-4 = 16px ... というように 4px刻み で増えていく！

クラス	計算	結果
mt-0	0.25rem × 0	0px
mt-1	0.25rem × 1	4px
mt-2	0.25rem × 2	8px
mt-4	0.25rem × 4	16px
mt-8	0.25rem × 8	32px
mt-16	0.25rem × 16	64px

📏 セクション1: mt / mr / mb / ml (方向別マージン)

各方向に個別にマージンを設定する

mt-6 margin-top: 24px

↑ 親の上端

← mt-6 = 24px →

Box

mr-6 margin-right: 24px

Box

mr-6

親の右端 →

mb-6 margin-bottom: 24px

Box

← mb-6 = 24px →

↓ 親の下端

ml-6 margin-left: 24px

← 親の左端

ml-6

Box

      <!-- CSS出力 -->

      .mt-6 { margin-top: calc(var(--spacing) * 6); } /* = 24px */

      .mr-6 { margin-right: calc(var(--spacing) * 6); }

      .mb-6 { margin-bottom: calc(var(--spacing) * 6); }

      .ml-6 { margin-left: calc(var(--spacing) * 6); }

➖ セクション2: 負のマージン (-mt, -mr, -mb, -ml)

要素を逆方向に引っ張る

mt-4 (正)

上の要素

mt-4 の要素

↕ 16px下へ

-mt-4 (負)

上の要素

-mt-4 の要素 (重なる!)

      /* 正のマージン: 要素を押し下げる */

      .mt-4  { margin-top: calc(var(--spacing) * 4); }  /* = +16px */

      /* 負のマージン: 要素を引き上げる（重なる） */

      .-mt-4 { margin-top: calc(var(--spacing) * -4); } /* = -16px */

⚠️ 負のマージンの使いどころ: 要素を重ねたり、親要素からはみ出させたいときに使う。カード画像をヘッダーに重ねたり、コンテンツを少し上にずらすデザインパターンでよく使われる。

✨ セクション3: 特殊値 (auto, px)

数値以外の便利なマージン値

mt-auto / ml-auto margin: auto → 残りスペースを自動で埋める

ml-auto で右寄せ:

ml-auto →

mx-auto で中央寄せ:

mx-auto

mt-px / -mt-px ちょうど1px（--spacing計算を使わない）

ボーダー

← 1px

mt-px

用途: ボーダーの重なりを微調整したり、1px単位のピクセルパーフェクトな位置調整に使う。--spacing の計算を介さず、直接 1px が設定される。

      .mt-auto { margin-top: auto; }

      .ml-auto { margin-left: auto; } /* Flexboxで右寄せ */

      .mt-px  { margin-top: 1px; }  /* 1px固定 */

      .-mt-px { margin-top: -1px; } /* -1px固定 */

🔧 セクション4: カスタムプロパティ & 任意値

デザイントークンや好きな値を直接指定

カスタムプロパティ方式:

          <!-- CSS変数を参照 -->

          mt-(--my-space)

          /* 出力されるCSS: */

          margin-top: var(--my-space);

任意値方式:

          <!-- 任意のCSS値を直接指定 -->

          mt-[20px]

          mt-[2em]

          mt-[5%]

          /* 出力されるCSS: */

          margin-top: 20px;

          margin-top: 2em;

          margin-top: 5%;

💡 使い分け:
• mt-(--my-space) → デザインシステムのCSS変数を使いたいとき
• mt-[20px] → 規定スケール外のピンポイントな値が必要なとき

🔥 セクション5: space-x / space-y（これが一番複雑！）

子要素の「間」に自動でマージンを入れる

⚡ 重要ポイント: space-x-* / space-y-* は親要素に付けるクラス。各子要素に個別にマージンを付けるのではなく、最後の子以外（:not(:last-child)）にマージンが自動適用される！

space-x-4 横方向の子要素間スペース

A

16px

B

16px

C

← Cの後はマージンなし！

space-y-4 縦方向の子要素間スペース

Item 1

↕ 16px

Item 2

↕ 16px

Item 3

🔍 CSSの仕組みを分解して理解:

        /* space-x-4 が生成するCSS */

        .space-x-4 > :not(:last-child) {

          --tw-space-x-reverse: 0;

          /* 通常(LTR)では reverse=0 なので: */

          /* margin-inline-start: calc(16px * 0) = 0px      ← 左側マージンなし */

          margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));

          /* margin-inline-end: calc(16px * (1-0)) = 16px   ← 右側に16pxマージン */

          margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));

        }

📝 つまりこういうこと:

① :not(:last-child) → 最後の子以外に適用
② --tw-space-x-reverse: 0 の時 → 右側(end)だけにマージン
③ --tw-space-x-reverse: 1 の時 → 左側(start)だけにマージン

なぜ margin-inline-start/end ？ → RTL(右から左)言語に自動対応するため！

🔄 セクション6: space-x-reverse / space-y-reverse

flex-row-reverse等で要素の順序が逆の場合に使う

flex-row + space-x-4（通常）:

1st

2nd

3rd

✅ margin-inline-end で右側にマージン

flex-row-reverse + space-x-reverse + space-x-4:

1st

2nd

3rd

🔄 reverse=1 → margin-inline-start で左側にマージン

      <!-- 通常の順序 -->

      <div class="flex space-x-4">...</div>

      <!-- 逆順の場合は space-x-reverse を追加 -->

      <div class="flex flex-row-reverse space-x-4 space-x-reverse">...</div>

      /* space-x-reverse が生成するCSS */

      .space-x-reverse > :not(:last-child) {

        --tw-space-x-reverse: 1; /* これで start/end のマージンが入れ替わる */

      }

💡 なぜ必要？: flex-row-reverse はDOM上の順序は変えずに見た目の順序だけ反転する。でも :not(:last-child) はDOM順序で判定されるので、マージンの付く方向もreverseに合わせて反転させる必要がある！

⚡ セクション7: space-x vs gap — どっちを使うべき？

モダンCSS では gap の方が推奨される場面が多い

space-x-4:

          <div class="flex space-x-4">

            <div>A</div>

            <div>B</div>

            <div>C</div>

          </div>

🟡 margin を使うので折り返しに弱い
🟡 :last-child 依存で動的リストに注意
🟢 reverse 対応可能

gap-4 (推奨):

          <div class="flex gap-4">

            <div>A</div>

            <div>B</div>

            <div>C</div>

          </div>

🟢 折り返し（flex-wrap）でも正しく動作
🟢 子要素数に依存しない
🟢 よりシンプル

✅ 結論: 基本的には gap を使おう！ space-x/y は、flex-row-reverse との組み合わせや、既存コードとの互換性が必要な場合に使う。Tailwind v4 でも space-* はサポートされているが、新しいプロジェクトでは gap がベタープラクティス。

📋 まとめチートシート

パターン	意味	例
mt-<n>	上マージン = n × 4px	mt-4 → 16px
-mt-<n>	負の上マージン（上に引く）	-mt-4 → -16px
mt-auto	自動マージン（寄せ/中央揃え）	Flexで下に押す
mt-px	1px固定マージン	ボーダー微調整
mt-(--var)	CSS変数を参照	デザイントークン
mt-[20px]	任意の値を直接指定	ピンポイント調整
space-x-<n>	子要素の横方向の間隔	親に付ける
space-y-<n>	子要素の縦方向の間隔	親に付ける
space-x-reverse	逆順時のマージン方向反転	flex-row-reverse時

🎨 TailwindCSS Space & Margin

完全ビジュアルガイド