余白と間隔

クラス

ファミリーがプロパティを選び、トークンが距離を指定します。px- と mx- はインライン軸を、pl- と ml- は物理的な左側を使います。完全なファミリー表には、それぞれのネイティブプロパティが載っています。

値

プリセットのスケールは rem 単位の長さを使います。ピクセル換算はルートのフォントサイズを 16px と仮定していますが、ブラウザーは実際のルートのフォントサイズを使います。ゼロや 1 CSS ピクセルには、p(0) や p(1) のような値を直接受け取る関数を使えます。

同じ距離でも作用する境界は異なる

p-md と gap-md はどちらも --spacing-md を参照します。ただし、padding は内容とボックスの端の間に、gap はレイアウト内の項目同士の間に空間を作ります。gap が外側の padding を作ることはありません。

強調した 2 つの距離はどちらも 1rem で、ルートのフォントサイズを 16px として表示しています。青と紫は確認用のオーバーレイであり、p-md や gap-md が追加する色ではありません。

テキストによる説明

1. 両方の例は Grid と、プリセットの --spacing-md の値 1rem を使います。内容の行には同じタイポグラフィと内部寸法を使っています。
2. 左の例は p-md を使い、gap はありません。青の帯はボックスの縁の内側にあり、内容を四方から囲んでいます。
3. 右の例は gap-md を使い、padding はありません。紫の帯は 2 行の間にだけあり、外周には同じ帯がありません。
4. 図のルートのフォントサイズは 16px なので、強調した各距離は 16px です。例には実際に生成した padding と gap を使いますが、注記の色と破線の境界はユーティリティの出力ではありません。

gap-md が設定するのは間隔の値だけで、Grid や Flexbox を有効にはしません。同様に、inset トークンはオフセットを設定しますが、配置方式は選びません。実際の効果はネイティブプロパティとレイアウトによって決まります。

負のトークン形式を使えるかどうかは参照側によって異なり、-mt-md は有効ですが -p-md は拒否されます。プリセットには zero や auto の間隔トークンはありません。ゼロには m(0) を、インライン方向の自動マージンには mx-auto などの固定ユーティリティを使います。

関連項目： 負の値、直接指定する値、ネイティブの gap の動作.

使用例

フォームに内側の余白を設け、フィールド同士、および各ラベルとコントロールの間隔を調整します。

<form class="… grid gap-md p-md">  <label class="… grid gap-2xs">Name<input class="… px-sm py-xs" value="Aron" /></label>  <label class="… grid gap-2xs">Email<input type="email" class="… px-sm py-xs" value="aron@example.com" /></label></form>

@layer theme {  :root,  :host {    --spacing-2xs: .375rem;    --spacing-xs: .5rem;    --spacing-sm: .75rem;    --spacing-md: 1rem  }}@layer utilities {  .grid {    display: grid  }  .gap-2xs {    gap: var(--spacing-2xs)  }  .gap-md {    gap: var(--spacing-md)  }  .p-md {    padding: var(--spacing-md)  }  .py-xs {    padding-block: var(--spacing-xs)  }  .px-sm {    padding-inline: var(--spacing-sm)  }}

カスタマイズ

プリセット値を変更したり、トークンを追加したりできます。--spacing-card を定義すると、p-card、m-card、gap-card などの間隔クラスが使えるようになります。

@theme {  --spacing-card: 1.25rem;}

@layer theme {  :root,  :host {    --spacing-card: 1.25rem  }}@layer utilities {  .p-card {    padding: var(--spacing-card)  }}

関連項目： テーマのディレクティブ、レイアウト.