1. 间距
  2. padding

间距

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;

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 p-<number> 工具(如 p-4p-8)来控制元素所有边的边距:

¥Use p-<number> utilities like p-4 and p-8 to control the padding on all sides of an element:

p-8
<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-6pr-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:

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>

添加水平填充(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:

px-8
<div class="px-8 ...">px-8</div>

添加垂直填充(Adding vertical padding)

¥Adding vertical padding

使用 py-<number> 工具(如 py-4py-8)来控制元素的垂直填充:

¥Use py-<number> utilities like py-4 and py-8 to control the vertical padding of an element:

py-8
<div class="py-8 ...">py-8</div>

使用逻辑属性(Using logical properties)

¥Using logical properties

使用 ps-<number>pe-<number> 工具(如 ps-4pe-8)设置 padding-inline-startpadding-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

ps-8
pe-8

Right-to-left

ps-8
pe-8
<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;
}

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

TailwindCSS v4.0 中文网 - 粤ICP备13048890号