间距
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>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 p-<number>
工具(如 p-4
和 p-8
)来控制元素所有边的边距:
¥Use p-<number>
utilities like p-4
and p-8
to control the padding on all sides of an element:
<div class="p-8 ...">p-8</div>
在一侧添加填充(Adding padding to one side)
¥Adding padding to one side
使用 pt-<number>
、pr-<number>
、pb-<number>
和 pl-<number>
工具(如 pt-6
和 pr-4
)控制元素一侧的填充:
¥Use pt-<number>
, pr-<number>
, pb-<number>
, and pl-<number>
utilities like pt-6
and pr-4
to control the padding on one side of an element:
<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>
添加水平填充(Adding horizontal padding)
¥Adding horizontal padding
使用 px-<number>
工具(如 px-4
)和 px-8
来控制元素的水平填充:
¥Use px-<number>
utilities like px-4
and px-8
to control the horizontal padding of an element:
<div class="px-8 ...">px-8</div>
添加垂直填充(Adding vertical padding)
¥Adding vertical padding
使用 py-<number>
工具(如 py-4
和 py-8
)来控制元素的垂直填充:
¥Use py-<number>
utilities like py-4
and py-8
to control the vertical padding of an element:
<div class="py-8 ...">py-8</div>
使用逻辑属性(Using logical properties)
¥Using logical properties
使用 ps-<number>
或 pe-<number>
工具(如 ps-4
和 pe-8
)设置 padding-inline-start
和 padding-inline-end
逻辑属性,它们根据文本方向映射到左侧或右侧:
¥Use ps-<number>
or pe-<number>
utilities like ps-4
and pe-8
to set the padding-inline-start
and padding-inline-end
logical properties, which map to either the left or right side based on the text direction:
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 修饰符 根据当前文本方向有条件地应用特定样式。
¥For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.
使用自定义值(Using a custom value)
¥Using a custom value
使用工具例如 p-[<value>]
,px-[<value>]
, and pb-[<value>]
根据完全自定义的值设置 padding:
<div class="p-[5px] ..."> <!-- ... --></div>
对于 CSS 变量,还可以使用 p-(<custom-property>)
语法:
<div class="p-(--my-padding) ..."> <!-- ... --></div>
这只是简写,用于 p-[var(<custom-property>)]
它会自动为你添加 var()
函数。
响应式设计(Responsive design)
¥Responsive design
在 padding
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="py-4 md:py-8 ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。
自定义主题(Customizing your theme)
¥Customizing your theme
该 p-<number>
,px-<number>
,py-<number>
,ps-<number>
,pe-<number>
,pt-<number>
,pr-<number>
,pb-<number>
, and pl-<number>
工具由 --spacing
主题变量驱动,可以在你自己的主题中进行自定义:
@theme { --spacing: 1px; }
在主题变量文档中了解有关自定义间距比例的更多信息。