padding

範例（Examples）

基本範例（Basic example）

使用 p-<number> 通用類別（如 p-4 和 p-8）來控制元素所有側邊的內距：

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

新增單側內距（Adding padding to one side）

使用 pt-<number>、pr-<number>、pb-<number> 和 pl-<number> 通用類別（如 pt-6 和 pr-4）來控制元素單側的內距：

<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>

新增水平內距（Adding horizontal padding）

使用 px-<number> 通用類別（如 px-4 和 px-8）來控制元素的水平內距：

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

新增垂直內距（Adding vertical padding）

使用 py-<number> 通用類別（如 py-4 和 py-8）來控制元素的垂直內距：

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

使用邏輯屬性（Using logical properties）

使用 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 修飾符來根據目前的文字方向條件式地套用特定樣式。

使用自訂值（Using a custom value）

使用 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() 函式。

響應式設計（Responsive design）

在 padding 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

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

在變體文件中了解更多關於使用變體的資訊。

自訂主題（Customizing your theme）

p-<number>、px-<number>、py-<number>、ps-<number>、pe-<number>、pt-<number>、pr-<number>、pb-<number>、 和 pl-<number> 通用類別由 --spacing 主題變數驅動，可以在你自己的主題中自訂：

@theme {  --spacing: 1px; }

在主題變數文件中了解更多關於自訂間距比例的資訊。