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>;
pbs-<number>	padding-block-start: calc(var(--spacing) * <number>);
pbs-px	padding-block-start: 1px;
pbs-(<custom-property>)	padding-block-start: var(<custom-property>);
pbs-[<value>]	padding-block-start: <value>;
pbe-<number>	padding-block-end: calc(var(--spacing) * <number>);
pbe-px	padding-block-end: 1px;
pbe-(<custom-property>)	padding-block-end: var(<custom-property>);
pbe-[<value>]	padding-block-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）控制元素四周的内边距：

p-8

<!-- [!code classes:p-8] -->
<div class="p-8 ...">p-8</div>

为单侧添加内边距

使用 pt-<number>、pr-<number>、pb-<number> 和 pl-<number> 这类工具类（如 pt-6 和 pr-4）控制元素单侧的内边距：

pt-6

pr-4

pb-8

pl-2

<!-- [!code classes:pt-6,pr-4,pb-8,pl-2] -->
<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）控制元素的水平内边距：

px-8

<!-- [!code classes:px-8] -->
<div class="px-8 ...">px-8</div>

添加垂直内边距

使用 py-<number> 这类工具类（如 py-4 和 py-8）控制元素的垂直内边距：

py-8

<!-- [!code classes: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

ps-8

pe-8

Right-to-left

ps-8

pe-8

<!-- [!code classes:ps-8,pe-8] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<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 修饰符，根据当前文本方向有条件地应用特定样式。

使用 pbs-<number> 和 pbe-<number> 工具类设置 padding-block-start 和 padding-block-end 逻辑属性，它们会根据书写模式映射到顶部或底部：

<!-- [!code classes:pbs-8] -->
<div class="pbs-8 ...">pbs-8</div>

使用自定义值

使用 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>、pbs-<number>、pbe-<number>、pt-<number>、pr-<number>、pb-<number> 和 pl-<number> 工具类由 --spacing 主题变量驱动，你可以在自己的主题中自定义它：

@theme {
  --spacing: 1px;
}

在 主题变量文档 中了解如何自定义间距比例。