内边距

示例

基本示例

使用 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 修饰符 根据当前文本方向有条件地应用特定样式。

使用自定义值

Use utilities like p-[<value>],px-[<value>], and pb-[<value>] to set the 内边距 based on a completely custom value:

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

For CSS variables, you can also use the p-(<custom-property>) syntax:

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

This is just a shorthand for p-[var(<custom-property>)] that adds the var() function for you automatically.

响应式设计

Prefix a padding utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

自定义你的主题

The p-<number>,px-<number>,py-<number>,ps-<number>,pe-<number>,pt-<number>,pr-<number>,pb-<number>, and pl-<number> utilities are driven by the --spacing theme variable, which can be customized in your own theme:

@theme {
  --spacing: 1px; 
}

Learn more about customizing the spacing scale in the theme variable documentation.