padding

範例

基本範例

使用 p-<number> 類別，例如 p-4 和 p-8，來控制元素四邊的內距。

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

在單邊增加內距

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

增加水平內距

使用 px-<number> 類別，例如 px-4 和 px-8，來控制元素的水平內距。

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

增加垂直內距

使用 py-<number> 類別，例如 py-4 和 py-8，來控制元素的垂直內距。

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

響應式設計

前綴一個 padding 類別 使用一個斷點變體，例如 md:，來只在中 螢幕尺寸及以上應用該類別。

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

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