margin

例

基本例

要素のすべての辺のmarginを制御するには、m-<number>ユーティリティ（m-4、m-8など）を使用します。

<div class="m-8 ...">m-8</div>

単一の辺にmarginを追加する

要素の片側のmarginを制御するには、mt-<number>、mr-<number>、mb-<number>、およびml-<number>ユーティリティ（ml-2、mt-6など）を使用します。

<div class="mt-6 ...">mt-6</div>
<div class="mr-4 ...">mr-4</div>
<div class="mb-8 ...">mb-8</div>
<div class="ml-2 ...">ml-2</div>

水平方向のmarginを追加する

要素の水平方向のmarginを制御するには、mx-<number>ユーティリティ（mx-4、mx-8など）を使用します。

<div class="mx-8 ...">mx-8</div>

垂直方向のmarginを追加する

要素の垂直方向のmarginを制御するには、my-<number>ユーティリティ（my-4、my-8など）を使用します。

<div class="my-8 ...">my-8</div>

負の値の使用

負のmargin値を使用するには、クラス名の先頭にダッシュを付けて負の値に変換します。

<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div>
<div class="-mt-8 bg-sky-300 ...">-mt-8</div>

論理プロパティの使用

margin-inline-startおよびmargin-inline-end論理プロパティを設定するには、ms-<number>またはme-<number>ユーティリティ（ms-4、me-8など）を使用します。

<div>
  <div dir="ltr">
    <div class="ms-8 ...">ms-8</div>
    <div class="me-8 ...">me-8</div>
  </div>
  <div dir="rtl">
    <div class="ms-8 ...">ms-8</div>
    <div class="me-8 ...">me-8</div>
  </div>
</div>

子要素間のスペースを追加する

要素間のスペースを制御するには、space-x-<number>またはspace-y-<number>ユーティリティ（space-x-4、space-y-8など）を使用します。

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

子要素の順序を反転する

要素が逆順になっている場合（flex-row-reverseやflex-col-reverseなどを使用）、space-x-reverseまたはspace-y-reverseユーティリティを使用して、スペースが各要素の正しい側に追加されるようにします。

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

制限事項

spaceユーティリティは、グループ内の最後以外のすべてのアイテムにmarginを追加するための単なるショートカットであり、グリッド、折り返しレイアウト、または子要素が自然なDOM順序ではなく複雑なカスタム順序でレンダリングされる状況のような複雑なケースを処理するように設計されていません。

そのような状況では、可能な場合はgapユーティリティを使用するか、親要素に一致する負のmarginを持つすべての要素にmarginを追加する方が適切です。

さらに、spaceユーティリティはdivideユーティリティと一緒に動作するように設計されていません。そのような状況では、代わりに子要素にmargin/paddingユーティリティを追加することを検討してください。

カスタム値の使用

次のようなユーティリティを使用します m-[<value>]、mx-[<value>]、およびmb-[<value>]を設定するにはmargin完全にカスタムの値に基づいて

<div class="m-[5px] ...">
  <!-- ... -->
</div>

CSS変数については、次のものも使用できます m-(<custom-property>) 構文

<div class="m-(--my-margin) ...">
  <!-- ... -->
</div>

これは、次の省略形です m-[var(<custom-property>)] var()関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa marginユーティリティ にmd:のようなブレークポイントバリアントを付けると、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみになります

<div class="mt-4 md:mt-8 ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。

テーマのカスタマイズ

The m-<number>、mx-<number>、my-<number>、ms-<number>、me-<number>、mt-<number>、mr-<number>、mb-<number>、およびml-<number>ユーティリティは、--spacingテーマ変数によって駆動され、独自のテーマでカスタマイズできます

@theme {
  --spacing: 1px; 
}

スペーシングスケールのカスタマイズの詳細については、テーマ変数のドキュメントを参照してください。