padding

例

基本的な例

p-<number> ユーティリティ（p-4 や p-8 など）を使用して、要素のすべての辺のpaddingを制御します

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

片側へのpaddingの追加

pt-<number>、pr-<number>、pb-<number>、および pl-<number> ユーティリティ（pt-6 や pr-4 など）を使用して、要素の片側のpaddingを制御します

<div class="pt-6 ...">pt-6</div>
<div class="pr-4 ...">pr-4</div>
<div class="pb-8 ...">pb-8</div>
<div class="pl-2 ...">pl-2</div>

水平方向のpaddingの追加

px-<number> ユーティリティ（px-4 や px-8 など）を使用して、要素の水平方向のpaddingを制御します

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

垂直方向のpaddingの追加

py-<number> ユーティリティ（py-4 や py-8 など）を使用して、要素の垂直方向のpaddingを制御します

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

論理プロパティの使用

ps-<number> または pe-<number> ユーティリティ（ps-4 や pe-8 など）を使用して、padding-inline-start および padding-inline-end 論理プロパティを設定します。これらは、テキストの方向に基いて左側または右側のいずれかにマッピングされます

<div>
  <div dir="ltr">
    <div class="ps-8 ...">ps-8</div>
    <div class="pe-8 ...">pe-8</div>
  </div>
  <div dir="rtl">
    <div class="ps-8 ...">ps-8</div>
    <div class="pe-8 ...">pe-8</div>
  </div>
</div>

さらに細かく制御するには、LTR および RTL 修飾子を使用して、現在のテキストの方向に応じて特定のスタイルを条件付きで適用することもできます。

カスタム値の使用

次のようなユーティリティを使用します p-[<value>],px-[<value>],および pb-[<value>]を設定するにはpadding完全にカスタムの値に基づいた

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

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

<div class="p-(--my-padding) ...">
  <!-- ... -->
</div>

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

レスポンシブデザイン

プレフィックスa padding ユーティリティ md: のようなブレークポイントバリアントを使用して、ユーティリティを適用する対象をmedium 以上の画面サイズのみに限定します

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

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

テーマのカスタマイズ

以下の p-<number>,px-<number>,py-<number>,ps-<number>,pe-<number>,pt-<number>,pr-<number>,pb-<number>,および pl-<number>ユーティリティは、`--spacing` テーマ変数によって駆動され、これは独自のテーマでカスタマイズできます。

@theme {
  --spacing: 1px; 
}

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