Spacing
padding
用于控制元素内边距的工具类。
| Class | Styles |
|---|---|
p-<number> | padding: calc(var(--spacing) * <number>); |
p-(<custom-property>) | padding: var(<custom-property>); |
p-[<value>] | padding: <value>; |
px-<number> | padding-inline: calc(var(--spacing) * <number>); |
px-(<custom-property>) | padding-inline: var(<custom-property>); |
px-[<value>] | padding-inline: <value>; |
py-<number> | padding-block: calc(var(--spacing) * <number>); |
py-(<custom-property>) | padding-block: var(<custom-property>); |
py-[<value>] | padding-block: <value>; |
ps-<number> | padding-inline-start: calc(var(--spacing) * <number>); |
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-(<custom-property>) | padding-inline-end: var(<custom-property>); |
pe-[<value>] | padding-inline-end: <value>; |
pt-<number> | padding-top: calc(var(--spacing) * <number>); |
pt-(<custom-property>) | padding-top: var(<custom-property>); |
pt-[<value>] | padding-top: <value>; |
pr-<number> | padding-right: calc(var(--spacing) * <number>); |
pr-(<custom-property>) | padding-right: var(<custom-property>); |
pr-[<value>] | padding-right: <value>; |
pb-<number> | padding-bottom: calc(var(--spacing) * <number>); |
pb-(<custom-property>) | padding-bottom: var(<custom-property>); |
pb-[<value>] | padding-bottom: <value>; |
pl-<number> | padding-left: calc(var(--spacing) * <number>); |
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 修饰符 来根据当前文本方向有条件地应用特定样式。
使用自定义值
Use utilities like p-[<value>],px-[<value>], and pb-[<value>] to set the padding 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.
