padding
快速参考
| 类名 | 样式 |
|---|---|
p-<number> | padding: calc(var(--spacing) * <number>); |
p-px | padding: 1px; |
p-(<custom-property>) | padding: var(<custom-property>); |
p-[<value>] | padding: <value>; |
px-<number> | padding-inline: calc(var(--spacing) * <number>); |
px-px | padding-inline: 1px; |
px-(<custom-property>) | padding-inline: var(<custom-property>); |
px-[<value>] | padding-inline: <value>; |
py-<number> | padding-block: calc(var(--spacing) * <number>); |
py-px | padding-block: 1px; |
py-(<custom-property>) | padding-block: var(<custom-property>); |
py-[<value>] | padding-block: <value>; |
ps-<number> | padding-inline-start: calc(var(--spacing) * <number>); |
ps-px | padding-inline-start: 1px; |
ps-(<custom-property>) | padding-inline-start: var(<custom-property>); |
ps-[<value>] | padding-inline-start: <value>; |
pe-<number> | padding-inline-end: calc(var(--spacing) * <number>); |
pe-px | padding-inline-end: 1px; |
pe-(<custom-property>) | padding-inline-end: var(<custom-property>); |
pe-[<value>] | padding-inline-end: <value>; |
pt-<number> | padding-top: calc(var(--spacing) * <number>); |
pt-px | padding-top: 1px; |
pt-(<custom-property>) | padding-top: var(<custom-property>); |
pt-[<value>] | padding-top: <value>; |
pr-<number> | padding-right: calc(var(--spacing) * <number>); |
pr-px | padding-right: 1px; |
pr-(<custom-property>) | padding-right: var(<custom-property>); |
pr-[<value>] | padding-right: <value>; |
pb-<number> | padding-bottom: calc(var(--spacing) * <number>); |
pb-px | padding-bottom: 1px; |
pb-(<custom-property>) | padding-bottom: var(<custom-property>); |
pb-[<value>] | padding-bottom: <value>; |
pl-<number> | padding-left: calc(var(--spacing) * <number>); |
pl-px | padding-left: 1px; |
pl-(<custom-property>) | padding-left: var(<custom-property>); |
pl-[<value>] | padding-left: <value>; |
示例
基本示例
使用 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 逻辑属性，它们根据文本方向映射到左侧或右侧：
Left-to-right
Right-to-left
<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() 函数。
响应式设计
使用断点变体（例如 md:）作为 padding 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：
<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;
}
在 主题变量文档 中了解更多关于自定义间距比例的信息。