外側の余白

対応する負の値と自動余白を含め、物理的な外側の余白を設定します。

margin は要素の境界線の外側に余白を作ります。通常のレイアウトで要素の周囲の空間を変えます。padding は境界線の内側に余白を作り、gap は親のレイアウトコンテナが項目間に空間を作ります。

クラスと CSS の早見表

クラスの例	期待される宣言
`m-4`	`margin-top: 1rem; margin-right: 1rem; margin-bottom: 1rem; margin-left: 1rem;`
`mx-8`	`margin-left: 2rem; margin-right: 2rem;`
`my-2`	`margin-top: 0.5rem; margin-bottom: 0.5rem;`
`mt-2`	`margin-top: 0.5rem;`
`mr-4`	`margin-right: 1rem;`
`mb-6`	`margin-bottom: 1.5rem;`
`ml-8`	`margin-left: 2rem;`

例の設定

この例では spacingUnit: "0.25rem"、reset: "none"、strict モード、空のブレークポイントを明示しています。数値の接尾辞に単位を掛けるため、m-4 は物理的な四辺に 1rem を出力します。Tailwind のスケールやテーマは継承しません。wind-demo クラスは枠とカードの表示だけを担当し、自作 CSS は各プレビューから確認できます。

使い方の例

四辺の外側に余白を作る

m-4 はカードの境界線と破線の枠の間に、四辺それぞれ 1rem を作ります。

四辺の外側に余白を作る

HTML

<div class="wind-demo wind-demo-frame">
  <div class="wind-demo-card m-4">m-4 · 1rem around the card</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  width: 20rem;
  min-height: 9rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-card {
  width: 8rem;
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}
.m-4 {
  margin-top: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
}

この例の設定

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-card": true
    },
    "safelist": {
      "docs-preview": [
        "m-4"
      ]
    }
  }
}

デモ用の自作 CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; width: 20rem; min-height: 9rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-card { width: 8rem; min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }

水平と垂直の margin を指定する

mx-8 は左右に 2rem、my-2 は上下に 0.5rem を追加します。

水平と垂直の margin を指定する

HTML

<div class="wind-demo wind-demo-frame wind-demo-axis-frame">
  <div class="wind-demo-card wind-demo-axis-card mx-8 my-2">mx-8 · my-2</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  min-height: 9rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-axis-frame {
  width: 20rem;
}

.wind-demo-card {
  width: 8rem;
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}

.wind-demo-axis-card {
  min-height: 5rem;
}
.mx-8 {
  margin-left: 2rem;
  margin-right: 2rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

この例の設定

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-axis-frame": true,
      "wind-demo-card": true,
      "wind-demo-axis-card": true
    },
    "safelist": {
      "docs-preview": [
        "mx-8",
        "my-2"
      ]
    }
  }
}

デモ用の自作 CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; min-height: 9rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-axis-frame { width: 20rem; }
.wind-demo-card { width: 8rem; min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }
.wind-demo-axis-card { min-height: 5rem; }

物理的な辺ごとに調整する

四つのカードに mt、mr、mb、ml を一つずつ指定し、各辺の作用を示します。

物理的な辺ごとに調整する

HTML

<div class="wind-demo wind-demo-frame wind-demo-edge-frame">
  <div class="wind-demo-card mt-2">mt-2 · top</div>
  <div class="wind-demo-card mr-4">mr-4 · right</div>
  <div class="wind-demo-card mb-6">mb-6 · bottom</div>
  <div class="wind-demo-card ml-8">ml-8 · left</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  min-height: 16rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-edge-frame {
  width: 22rem;
}

.wind-demo-card {
  width: 8rem;
  min-height: 2.5rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-8 {
  margin-left: 2rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mt-2 {
  margin-top: 0.5rem;
}

この例の設定

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-edge-frame": true,
      "wind-demo-card": true
    },
    "safelist": {
      "docs-preview": [
        "mb-6",
        "ml-8",
        "mr-4",
        "mt-2"
      ]
    }
  }
}

デモ用の自作 CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; min-height: 16rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-edge-frame { width: 22rem; }
.wind-demo-card { width: 8rem; min-height: 2.5rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }

負の余白で近くの空間に重ねる

上と左の負の margin は通常フローで要素が占める空間を減らし、前のカードに重ねます。

負の余白で近くの空間に重ねる

HTML

<div class="wind-demo wind-demo-frame wind-demo-negative-frame">
  <div class="wind-demo-card">Normal flow</div>
  <div class="wind-demo-card wind-demo-negative-card -mt-3 -ml-4">-mt-3 · -ml-4</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  width: 20rem;
  min-height: 10rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-card {
  width: 10rem;
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}

.wind-demo-negative-card {
  background: #c6d8e9;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-3 {
  margin-top: -0.75rem;
}

この例の設定

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-negative-frame": true,
      "wind-demo-card": true,
      "wind-demo-negative-card": true
    },
    "safelist": {
      "docs-preview": [
        "-ml-4",
        "-mt-3"
      ]
    }
  }
}

デモ用の自作 CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; width: 20rem; min-height: 10rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-card { width: 10rem; min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }
.wind-demo-negative-card { background: #c6d8e9; }

幅を指定したブロックを中央に置く

mx-auto は余った横方向の空間を 10rem のカードの左右に均等に配分します。

幅を指定したブロックを中央に置く

HTML

<div class="wind-demo wind-demo-frame wind-demo-auto-frame">
  <div class="wind-demo-card wind-demo-auto-card mx-auto">mx-auto · centered block</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  min-height: 9rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-auto-frame {
  width: 22rem;
}

.wind-demo-card {
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}

.wind-demo-auto-card {
  width: 10rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

この例の設定

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-auto-frame": true,
      "wind-demo-card": true,
      "wind-demo-auto-card": true
    },
    "safelist": {
      "docs-preview": [
        "mx-auto"
      ]
    }
  }
}

デモ用の自作 CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; min-height: 9rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-auto-frame { width: 22rem; }
.wind-demo-card { min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }
.wind-demo-auto-card { width: 10rem; }

再利用する margin に名前を付ける

tokens.spacing.section に 1.5rem を明示的に設定しています。

再利用する margin に名前を付ける

HTML

<div class="wind-demo wind-demo-frame">
  <div class="wind-demo-card m-section">m-section · 1.5rem around the card</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-section: 1.5rem;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  width: 20rem;
  min-height: 10rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-card {
  width: 8rem;
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}
.m-section {
  margin-top: var(--zw-spacing-section);
  margin-right: var(--zw-spacing-section);
  margin-bottom: var(--zw-spacing-section);
  margin-left: var(--zw-spacing-section);
}

この例の設定

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "spacing": {
        "section": "1.5rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-card": true
    },
    "safelist": {
      "docs-preview": [
        "m-section"
      ]
    }
  }
}

デモ用の自作 CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; width: 20rem; min-height: 10rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-card { width: 8rem; min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }

一度だけ使う長さを指定する

mt-[18px] は物理的な上 margin のみを 18px にします。

一度だけ使う長さを指定する

HTML

<div class="wind-demo wind-demo-frame">
  <div class="wind-demo-card mt-[18px]">mt-[18px] · one-off length</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  width: 20rem;
  min-height: 9rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-card {
  width: 8rem;
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}
.mt-\[18px\] {
  margin-top: 18px;
}

この例の設定

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-card": true
    },
    "safelist": {
      "docs-preview": [
        "mt-[18px]"
      ]
    }
  }
}

デモ用の自作 CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; width: 20rem; min-height: 9rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-card { width: 8rem; min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }

任意値と名前付きの値

m-0 は margin をなくし、m-px はトークンなしで 1px を指定します。それ以外の数値には tokens.spacingUnit が必要です。m-section のような名前付きの値は tokens.spacing、mt-[18px] のような任意値はスケール不要です。margin の軸と辺は物理的な方向を使います。mx は左右、my は上下、mt/mr/mb/ml は各辺を指し、書字方向には追従しません。margin は負の値を使え、-mt-3 のように root の前にハイフンを付けます。padding と gap では負の値を使えません。auto も使えます。mx-auto は幅を指定したブロックの左右に空間があれば中央に配置し、上下の auto はレイアウトの文脈が余剰空間を配分するときに働きます。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

m

フィールド	値
カタログ識別子	`v1.m`
クラスパターン	`m-<suffix>`
文法	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`3`
トークンカテゴリ	`spacing`
負の値の規則	`allowed`
競合グループと順位	`margin` (`10`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`margin-top`, `margin-right`, `margin-bottom`, `margin-left`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

宣言テンプレート

プロパティ	値の種類	固定値
`margin-top`	`resolved`	`null`
`margin-right`	`resolved`	`null`
`margin-bottom`	`resolved`	`null`
`margin-left`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`m-0`	`margin-top: 0`; `margin-right: 0`; `margin-bottom: 0`; `margin-left: 0`

mx

フィールド	値
カタログ識別子	`v1.mx`
クラスパターン	`mx-<suffix>`
文法	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-left","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`3`
トークンカテゴリ	`spacing`
負の値の規則	`allowed`
競合グループと順位	`margin` (`10`)
並び順の順位	`1`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`margin-left`, `margin-right`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

宣言テンプレート

プロパティ	値の種類	固定値
`margin-left`	`resolved`	`null`
`margin-right`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`mx-0`	`margin-left: 0`; `margin-right: 0`

my

フィールド	値
カタログ識別子	`v1.my`
クラスパターン	`my-<suffix>`
文法	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`3`
トークンカテゴリ	`spacing`
負の値の規則	`allowed`
競合グループと順位	`margin` (`10`)
並び順の順位	`1`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`margin-top`, `margin-bottom`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

宣言テンプレート

プロパティ	値の種類	固定値
`margin-top`	`resolved`	`null`
`margin-bottom`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`my-0`	`margin-top: 0`; `margin-bottom: 0`

mb

フィールド	値
カタログ識別子	`v1.mb`
クラスパターン	`mb-<suffix>`
文法	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-bottom","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`3`
トークンカテゴリ	`spacing`
負の値の規則	`allowed`
競合グループと順位	`margin` (`10`)
並び順の順位	`2`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`margin-bottom`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

宣言テンプレート

プロパティ	値の種類	固定値
`margin-bottom`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`mb-0`	`margin-bottom: 0`

ml

フィールド	値
カタログ識別子	`v1.ml`
クラスパターン	`ml-<suffix>`
文法	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-left","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`3`
トークンカテゴリ	`spacing`
負の値の規則	`allowed`
競合グループと順位	`margin` (`10`)
並び順の順位	`2`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`margin-left`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

宣言テンプレート

プロパティ	値の種類	固定値
`margin-left`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`ml-0`	`margin-left: 0`

mr

フィールド	値
カタログ識別子	`v1.mr`
クラスパターン	`mr-<suffix>`
文法	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-right","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`3`
トークンカテゴリ	`spacing`
負の値の規則	`allowed`
競合グループと順位	`margin` (`10`)
並び順の順位	`2`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`margin-right`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

宣言テンプレート

プロパティ	値の種類	固定値
`margin-right`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`mr-0`	`margin-right: 0`

mt

フィールド	値
カタログ識別子	`v1.mt`
クラスパターン	`mt-<suffix>`
文法	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`3`
トークンカテゴリ	`spacing`
負の値の規則	`allowed`
競合グループと順位	`margin` (`10`)
並び順の順位	`2`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`margin-top`

受け入れる値

種類	接尾辞	出力される値
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

宣言テンプレート

プロパティ	値の種類	固定値
`margin-top`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`mt-0`	`margin-top: 0`

外側の余白

クラスと CSS の早見表

使い方の例

四辺の外側に余白を作る

水平と垂直の margin を指定する

物理的な辺ごとに調整する

負の余白で近くの空間に重ねる

幅を指定したブロックを中央に置く

再利用する margin に名前を付ける

一度だけ使う長さを指定する

任意値と名前付きの値

m

受け入れる値

宣言テンプレート

カタログの例

mx

受け入れる値

宣言テンプレート

カタログの例

my

受け入れる値

宣言テンプレート

カタログの例

mb

受け入れる値

宣言テンプレート

カタログの例

ml

受け入れる値

宣言テンプレート

カタログの例

mr

受け入れる値

宣言テンプレート

カタログの例

mt

受け入れる値

宣言テンプレート

カタログの例

Revision History