内边距

示例

基本示例

使用 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>]设置内边距基于完全自定义的值

<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> p-<number>,px-<number>,py-<number>,ps-<number>,pe-<number>,pt-<number>,pr-<number>,pb-<number>,和 pl-<number>实用程序由 --spacing 主题变量驱动，该变量可以在您自己的主题中自定义

@theme {
  --spacing: 1px; 
}

在主题变量文档中了解有关自定义间距刻度的更多信息。