1. 间距
  2. 内边距

Quick reference

属性
p-0padding: 0px;
px-0padding-left: 0px; padding-right: 0px;
py-0padding-top: 0px; padding-bottom: 0px;
ps-0padding-inline-start: 0px;
pe-0padding-inline-end: 0px;
pt-0padding-top: 0px;
pr-0padding-right: 0px;
pb-0padding-bottom: 0px;
pl-0padding-left: 0px;
p-pxpadding: 1px;
px-pxpadding-left: 1px; padding-right: 1px;
py-pxpadding-top: 1px; padding-bottom: 1px;
ps-pxpadding-inline-start: 1px;
pe-pxpadding-inline-end: 1px;
pt-pxpadding-top: 1px;
pr-pxpadding-right: 1px;
pb-pxpadding-bottom: 1px;
pl-pxpadding-left: 1px;
p-0.5padding: 0.125rem; /* 2px */
px-0.5padding-left: 0.125rem; /* 2px */ padding-right: 0.125rem; /* 2px */
py-0.5padding-top: 0.125rem; /* 2px */ padding-bottom: 0.125rem; /* 2px */
ps-0.5padding-inline-start: 0.125rem; /* 2px */
pe-0.5padding-inline-end: 0.125rem; /* 2px */
pt-0.5padding-top: 0.125rem; /* 2px */
pr-0.5padding-right: 0.125rem; /* 2px */
pb-0.5padding-bottom: 0.125rem; /* 2px */
pl-0.5padding-left: 0.125rem; /* 2px */
p-1padding: 0.25rem; /* 4px */
px-1padding-left: 0.25rem; /* 4px */ padding-right: 0.25rem; /* 4px */
py-1padding-top: 0.25rem; /* 4px */ padding-bottom: 0.25rem; /* 4px */
ps-1padding-inline-start: 0.25rem; /* 4px */
pe-1padding-inline-end: 0.25rem; /* 4px */
pt-1padding-top: 0.25rem; /* 4px */
pr-1padding-right: 0.25rem; /* 4px */
pb-1padding-bottom: 0.25rem; /* 4px */
pl-1padding-left: 0.25rem; /* 4px */
p-1.5padding: 0.375rem; /* 6px */
px-1.5padding-left: 0.375rem; /* 6px */ padding-right: 0.375rem; /* 6px */
py-1.5padding-top: 0.375rem; /* 6px */ padding-bottom: 0.375rem; /* 6px */
ps-1.5padding-inline-start: 0.375rem; /* 6px */
pe-1.5padding-inline-end: 0.375rem; /* 6px */
pt-1.5padding-top: 0.375rem; /* 6px */
pr-1.5padding-right: 0.375rem; /* 6px */
pb-1.5padding-bottom: 0.375rem; /* 6px */
pl-1.5padding-left: 0.375rem; /* 6px */
p-2padding: 0.5rem; /* 8px */
px-2padding-left: 0.5rem; /* 8px */ padding-right: 0.5rem; /* 8px */
py-2padding-top: 0.5rem; /* 8px */ padding-bottom: 0.5rem; /* 8px */
ps-2padding-inline-start: 0.5rem; /* 8px */
pe-2padding-inline-end: 0.5rem; /* 8px */
pt-2padding-top: 0.5rem; /* 8px */
pr-2padding-right: 0.5rem; /* 8px */
pb-2padding-bottom: 0.5rem; /* 8px */
pl-2padding-left: 0.5rem; /* 8px */
p-2.5padding: 0.625rem; /* 10px */
px-2.5padding-left: 0.625rem; /* 10px */ padding-right: 0.625rem; /* 10px */
py-2.5padding-top: 0.625rem; /* 10px */ padding-bottom: 0.625rem; /* 10px */
ps-2.5padding-inline-start: 0.625rem; /* 10px */
pe-2.5padding-inline-end: 0.625rem; /* 10px */
pt-2.5padding-top: 0.625rem; /* 10px */
pr-2.5padding-right: 0.625rem; /* 10px */
pb-2.5padding-bottom: 0.625rem; /* 10px */
pl-2.5padding-left: 0.625rem; /* 10px */
p-3padding: 0.75rem; /* 12px */
px-3padding-left: 0.75rem; /* 12px */ padding-right: 0.75rem; /* 12px */
py-3padding-top: 0.75rem; /* 12px */ padding-bottom: 0.75rem; /* 12px */
ps-3padding-inline-start: 0.75rem; /* 12px */
pe-3padding-inline-end: 0.75rem; /* 12px */
pt-3padding-top: 0.75rem; /* 12px */
pr-3padding-right: 0.75rem; /* 12px */
pb-3padding-bottom: 0.75rem; /* 12px */
pl-3padding-left: 0.75rem; /* 12px */
p-3.5padding: 0.875rem; /* 14px */
px-3.5padding-left: 0.875rem; /* 14px */ padding-right: 0.875rem; /* 14px */
py-3.5padding-top: 0.875rem; /* 14px */ padding-bottom: 0.875rem; /* 14px */
ps-3.5padding-inline-start: 0.875rem; /* 14px */
pe-3.5padding-inline-end: 0.875rem; /* 14px */
pt-3.5padding-top: 0.875rem; /* 14px */
pr-3.5padding-right: 0.875rem; /* 14px */
pb-3.5padding-bottom: 0.875rem; /* 14px */
pl-3.5padding-left: 0.875rem; /* 14px */
p-4padding: 1rem; /* 16px */
px-4padding-left: 1rem; /* 16px */ padding-right: 1rem; /* 16px */
py-4padding-top: 1rem; /* 16px */ padding-bottom: 1rem; /* 16px */
ps-4padding-inline-start: 1rem; /* 16px */
pe-4padding-inline-end: 1rem; /* 16px */
pt-4padding-top: 1rem; /* 16px */
pr-4padding-right: 1rem; /* 16px */
pb-4padding-bottom: 1rem; /* 16px */
pl-4padding-left: 1rem; /* 16px */
p-5padding: 1.25rem; /* 20px */
px-5padding-left: 1.25rem; /* 20px */ padding-right: 1.25rem; /* 20px */
py-5padding-top: 1.25rem; /* 20px */ padding-bottom: 1.25rem; /* 20px */
ps-5padding-inline-start: 1.25rem; /* 20px */
pe-5padding-inline-end: 1.25rem; /* 20px */
pt-5padding-top: 1.25rem; /* 20px */
pr-5padding-right: 1.25rem; /* 20px */
pb-5padding-bottom: 1.25rem; /* 20px */
pl-5padding-left: 1.25rem; /* 20px */
p-6padding: 1.5rem; /* 24px */
px-6padding-left: 1.5rem; /* 24px */ padding-right: 1.5rem; /* 24px */
py-6padding-top: 1.5rem; /* 24px */ padding-bottom: 1.5rem; /* 24px */
ps-6padding-inline-start: 1.5rem; /* 24px */
pe-6padding-inline-end: 1.5rem; /* 24px */
pt-6padding-top: 1.5rem; /* 24px */
pr-6padding-right: 1.5rem; /* 24px */
pb-6padding-bottom: 1.5rem; /* 24px */
pl-6padding-left: 1.5rem; /* 24px */
p-7padding: 1.75rem; /* 28px */
px-7padding-left: 1.75rem; /* 28px */ padding-right: 1.75rem; /* 28px */
py-7padding-top: 1.75rem; /* 28px */ padding-bottom: 1.75rem; /* 28px */
ps-7padding-inline-start: 1.75rem; /* 28px */
pe-7padding-inline-end: 1.75rem; /* 28px */
pt-7padding-top: 1.75rem; /* 28px */
pr-7padding-right: 1.75rem; /* 28px */
pb-7padding-bottom: 1.75rem; /* 28px */
pl-7padding-left: 1.75rem; /* 28px */
p-8padding: 2rem; /* 32px */
px-8padding-left: 2rem; /* 32px */ padding-right: 2rem; /* 32px */
py-8padding-top: 2rem; /* 32px */ padding-bottom: 2rem; /* 32px */
ps-8padding-inline-start: 2rem; /* 32px */
pe-8padding-inline-end: 2rem; /* 32px */
pt-8padding-top: 2rem; /* 32px */
pr-8padding-right: 2rem; /* 32px */
pb-8padding-bottom: 2rem; /* 32px */
pl-8padding-left: 2rem; /* 32px */
p-9padding: 2.25rem; /* 36px */
px-9padding-left: 2.25rem; /* 36px */ padding-right: 2.25rem; /* 36px */
py-9padding-top: 2.25rem; /* 36px */ padding-bottom: 2.25rem; /* 36px */
ps-9padding-inline-start: 2.25rem; /* 36px */
pe-9padding-inline-end: 2.25rem; /* 36px */
pt-9padding-top: 2.25rem; /* 36px */
pr-9padding-right: 2.25rem; /* 36px */
pb-9padding-bottom: 2.25rem; /* 36px */
pl-9padding-left: 2.25rem; /* 36px */
p-10padding: 2.5rem; /* 40px */
px-10padding-left: 2.5rem; /* 40px */ padding-right: 2.5rem; /* 40px */
py-10padding-top: 2.5rem; /* 40px */ padding-bottom: 2.5rem; /* 40px */
ps-10padding-inline-start: 2.5rem; /* 40px */
pe-10padding-inline-end: 2.5rem; /* 40px */
pt-10padding-top: 2.5rem; /* 40px */
pr-10padding-right: 2.5rem; /* 40px */
pb-10padding-bottom: 2.5rem; /* 40px */
pl-10padding-left: 2.5rem; /* 40px */
p-11padding: 2.75rem; /* 44px */
px-11padding-left: 2.75rem; /* 44px */ padding-right: 2.75rem; /* 44px */
py-11padding-top: 2.75rem; /* 44px */ padding-bottom: 2.75rem; /* 44px */
ps-11padding-inline-start: 2.75rem; /* 44px */
pe-11padding-inline-end: 2.75rem; /* 44px */
pt-11padding-top: 2.75rem; /* 44px */
pr-11padding-right: 2.75rem; /* 44px */
pb-11padding-bottom: 2.75rem; /* 44px */
pl-11padding-left: 2.75rem; /* 44px */
p-12padding: 3rem; /* 48px */
px-12padding-left: 3rem; /* 48px */ padding-right: 3rem; /* 48px */
py-12padding-top: 3rem; /* 48px */ padding-bottom: 3rem; /* 48px */
ps-12padding-inline-start: 3rem; /* 48px */
pe-12padding-inline-end: 3rem; /* 48px */
pt-12padding-top: 3rem; /* 48px */
pr-12padding-right: 3rem; /* 48px */
pb-12padding-bottom: 3rem; /* 48px */
pl-12padding-left: 3rem; /* 48px */
p-14padding: 3.5rem; /* 56px */
px-14padding-left: 3.5rem; /* 56px */ padding-right: 3.5rem; /* 56px */
py-14padding-top: 3.5rem; /* 56px */ padding-bottom: 3.5rem; /* 56px */
ps-14padding-inline-start: 3.5rem; /* 56px */
pe-14padding-inline-end: 3.5rem; /* 56px */
pt-14padding-top: 3.5rem; /* 56px */
pr-14padding-right: 3.5rem; /* 56px */
pb-14padding-bottom: 3.5rem; /* 56px */
pl-14padding-left: 3.5rem; /* 56px */
p-16padding: 4rem; /* 64px */
px-16padding-left: 4rem; /* 64px */ padding-right: 4rem; /* 64px */
py-16padding-top: 4rem; /* 64px */ padding-bottom: 4rem; /* 64px */
ps-16padding-inline-start: 4rem; /* 64px */
pe-16padding-inline-end: 4rem; /* 64px */
pt-16padding-top: 4rem; /* 64px */
pr-16padding-right: 4rem; /* 64px */
pb-16padding-bottom: 4rem; /* 64px */
pl-16padding-left: 4rem; /* 64px */
p-20padding: 5rem; /* 80px */
px-20padding-left: 5rem; /* 80px */ padding-right: 5rem; /* 80px */
py-20padding-top: 5rem; /* 80px */ padding-bottom: 5rem; /* 80px */
ps-20padding-inline-start: 5rem; /* 80px */
pe-20padding-inline-end: 5rem; /* 80px */
pt-20padding-top: 5rem; /* 80px */
pr-20padding-right: 5rem; /* 80px */
pb-20padding-bottom: 5rem; /* 80px */
pl-20padding-left: 5rem; /* 80px */
p-24padding: 6rem; /* 96px */
px-24padding-left: 6rem; /* 96px */ padding-right: 6rem; /* 96px */
py-24padding-top: 6rem; /* 96px */ padding-bottom: 6rem; /* 96px */
ps-24padding-inline-start: 6rem; /* 96px */
pe-24padding-inline-end: 6rem; /* 96px */
pt-24padding-top: 6rem; /* 96px */
pr-24padding-right: 6rem; /* 96px */
pb-24padding-bottom: 6rem; /* 96px */
pl-24padding-left: 6rem; /* 96px */
p-28padding: 7rem; /* 112px */
px-28padding-left: 7rem; /* 112px */ padding-right: 7rem; /* 112px */
py-28padding-top: 7rem; /* 112px */ padding-bottom: 7rem; /* 112px */
ps-28padding-inline-start: 7rem; /* 112px */
pe-28padding-inline-end: 7rem; /* 112px */
pt-28padding-top: 7rem; /* 112px */
pr-28padding-right: 7rem; /* 112px */
pb-28padding-bottom: 7rem; /* 112px */
pl-28padding-left: 7rem; /* 112px */
p-32padding: 8rem; /* 128px */
px-32padding-left: 8rem; /* 128px */ padding-right: 8rem; /* 128px */
py-32padding-top: 8rem; /* 128px */ padding-bottom: 8rem; /* 128px */
ps-32padding-inline-start: 8rem; /* 128px */
pe-32padding-inline-end: 8rem; /* 128px */
pt-32padding-top: 8rem; /* 128px */
pr-32padding-right: 8rem; /* 128px */
pb-32padding-bottom: 8rem; /* 128px */
pl-32padding-left: 8rem; /* 128px */
p-36padding: 9rem; /* 144px */
px-36padding-left: 9rem; /* 144px */ padding-right: 9rem; /* 144px */
py-36padding-top: 9rem; /* 144px */ padding-bottom: 9rem; /* 144px */
ps-36padding-inline-start: 9rem; /* 144px */
pe-36padding-inline-end: 9rem; /* 144px */
pt-36padding-top: 9rem; /* 144px */
pr-36padding-right: 9rem; /* 144px */
pb-36padding-bottom: 9rem; /* 144px */
pl-36padding-left: 9rem; /* 144px */
p-40padding: 10rem; /* 160px */
px-40padding-left: 10rem; /* 160px */ padding-right: 10rem; /* 160px */
py-40padding-top: 10rem; /* 160px */ padding-bottom: 10rem; /* 160px */
ps-40padding-inline-start: 10rem; /* 160px */
pe-40padding-inline-end: 10rem; /* 160px */
pt-40padding-top: 10rem; /* 160px */
pr-40padding-right: 10rem; /* 160px */
pb-40padding-bottom: 10rem; /* 160px */
pl-40padding-left: 10rem; /* 160px */
p-44padding: 11rem; /* 176px */
px-44padding-left: 11rem; /* 176px */ padding-right: 11rem; /* 176px */
py-44padding-top: 11rem; /* 176px */ padding-bottom: 11rem; /* 176px */
ps-44padding-inline-start: 11rem; /* 176px */
pe-44padding-inline-end: 11rem; /* 176px */
pt-44padding-top: 11rem; /* 176px */
pr-44padding-right: 11rem; /* 176px */
pb-44padding-bottom: 11rem; /* 176px */
pl-44padding-left: 11rem; /* 176px */
p-48padding: 12rem; /* 192px */
px-48padding-left: 12rem; /* 192px */ padding-right: 12rem; /* 192px */
py-48padding-top: 12rem; /* 192px */ padding-bottom: 12rem; /* 192px */
ps-48padding-inline-start: 12rem; /* 192px */
pe-48padding-inline-end: 12rem; /* 192px */
pt-48padding-top: 12rem; /* 192px */
pr-48padding-right: 12rem; /* 192px */
pb-48padding-bottom: 12rem; /* 192px */
pl-48padding-left: 12rem; /* 192px */
p-52padding: 13rem; /* 208px */
px-52padding-left: 13rem; /* 208px */ padding-right: 13rem; /* 208px */
py-52padding-top: 13rem; /* 208px */ padding-bottom: 13rem; /* 208px */
ps-52padding-inline-start: 13rem; /* 208px */
pe-52padding-inline-end: 13rem; /* 208px */
pt-52padding-top: 13rem; /* 208px */
pr-52padding-right: 13rem; /* 208px */
pb-52padding-bottom: 13rem; /* 208px */
pl-52padding-left: 13rem; /* 208px */
p-56padding: 14rem; /* 224px */
px-56padding-left: 14rem; /* 224px */ padding-right: 14rem; /* 224px */
py-56padding-top: 14rem; /* 224px */ padding-bottom: 14rem; /* 224px */
ps-56padding-inline-start: 14rem; /* 224px */
pe-56padding-inline-end: 14rem; /* 224px */
pt-56padding-top: 14rem; /* 224px */
pr-56padding-right: 14rem; /* 224px */
pb-56padding-bottom: 14rem; /* 224px */
pl-56padding-left: 14rem; /* 224px */
p-60padding: 15rem; /* 240px */
px-60padding-left: 15rem; /* 240px */ padding-right: 15rem; /* 240px */
py-60padding-top: 15rem; /* 240px */ padding-bottom: 15rem; /* 240px */
ps-60padding-inline-start: 15rem; /* 240px */
pe-60padding-inline-end: 15rem; /* 240px */
pt-60padding-top: 15rem; /* 240px */
pr-60padding-right: 15rem; /* 240px */
pb-60padding-bottom: 15rem; /* 240px */
pl-60padding-left: 15rem; /* 240px */
p-64padding: 16rem; /* 256px */
px-64padding-left: 16rem; /* 256px */ padding-right: 16rem; /* 256px */
py-64padding-top: 16rem; /* 256px */ padding-bottom: 16rem; /* 256px */
ps-64padding-inline-start: 16rem; /* 256px */
pe-64padding-inline-end: 16rem; /* 256px */
pt-64padding-top: 16rem; /* 256px */
pr-64padding-right: 16rem; /* 256px */
pb-64padding-bottom: 16rem; /* 256px */
pl-64padding-left: 16rem; /* 256px */
p-72padding: 18rem; /* 288px */
px-72padding-left: 18rem; /* 288px */ padding-right: 18rem; /* 288px */
py-72padding-top: 18rem; /* 288px */ padding-bottom: 18rem; /* 288px */
ps-72padding-inline-start: 18rem; /* 288px */
pe-72padding-inline-end: 18rem; /* 288px */
pt-72padding-top: 18rem; /* 288px */
pr-72padding-right: 18rem; /* 288px */
pb-72padding-bottom: 18rem; /* 288px */
pl-72padding-left: 18rem; /* 288px */
p-80padding: 20rem; /* 320px */
px-80padding-left: 20rem; /* 320px */ padding-right: 20rem; /* 320px */
py-80padding-top: 20rem; /* 320px */ padding-bottom: 20rem; /* 320px */
ps-80padding-inline-start: 20rem; /* 320px */
pe-80padding-inline-end: 20rem; /* 320px */
pt-80padding-top: 20rem; /* 320px */
pr-80padding-right: 20rem; /* 320px */
pb-80padding-bottom: 20rem; /* 320px */
pl-80padding-left: 20rem; /* 320px */
p-96padding: 24rem; /* 384px */
px-96padding-left: 24rem; /* 384px */ padding-right: 24rem; /* 384px */
py-96padding-top: 24rem; /* 384px */ padding-bottom: 24rem; /* 384px */
ps-96padding-inline-start: 24rem; /* 384px */
pe-96padding-inline-end: 24rem; /* 384px */
pt-96padding-top: 24rem; /* 384px */
pr-96padding-right: 24rem; /* 384px */
pb-96padding-bottom: 24rem; /* 384px */
pl-96padding-left: 24rem; /* 384px */

基本用法

¥Basic usage

向单边添加填充

¥Add padding to a single side

使用 pt-*pr-*pb-*pl-* 工具来控制元素一侧的填充。

¥Use the pt-*, pr-*, pb-*, and pl-* utilities to control the padding on one side of an element.

例如,pt-6 将在元素的顶部添加 1.5rem 的填充,pr-4 将在元素的右侧添加 1rem 的填充,pb-8 将在元素的底部添加 2rem 的填充,pl-2 将在元素的底部添加 0.5rem 的填充 元素的左边。

¥For example, pt-6 would add 1.5rem of padding to the top of an element, pr-4 would add 1rem of padding to the right of an element, pb-8 would add 2rem of padding to the bottom of an element, and pl-2 would add 0.5rem of padding to the left 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>

添加水平填充

¥Add horizontal padding

使用 px-* 工具来控制元素的水平填充。

¥Use the px-* utilities to control the horizontal padding of an element.

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

添加垂直填充

¥Add vertical padding

使用 py-* 工具来控制元素的垂直填充。

¥Use the py-* utilities to control the vertical padding of an element.

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

向所有边添加填充

¥Add padding to all sides

使用 p-* 工具来控制元素所有侧面的填充。

¥Use the p-* utilities to control the padding on all sides of an element.

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

使用逻辑属性

¥Using logical properties

使用 ps-*pe-* 工具设置 padding-inline-startpadding-inline-end 逻辑属性,它们根据文本方向映射到左侧或右侧。

¥Use the ps-* and pe-* utilities 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 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>

要获得更多控制,你还可以使用 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.


有条件地应用

悬停、聚焦和其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如,使用hover:py-8 仅在 hover 时应用 py-8 工具。

<div class="py-4 hover:py-8">
  <!-- ... -->
</div>

有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。

断点和媒体查询

你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:py-8 仅在中等屏幕尺寸及以上时应用 py-8 工具。

<div class="py-4 md:py-8">
  <!-- ... -->
</div>

要了解更多信息,请查看有关 响应式设计暗黑模式、以及 其他媒体查询修饰符 的文档。


使用自定义值

¥Using custom values

自定义主题

¥Customizing your theme

默认情况下,Tailwind 的填充比例使用 默认间距比例。你可以通过编辑 tailwind.config.js 文件中的 theme.spacingtheme.extend.spacing 来自定义间距比例。

¥By default, Tailwind’s padding scale uses the default spacing scale. You can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

或者,你可以通过编辑 tailwind.config.js 文件中的 theme.paddingtheme.extend.padding 来自定义填充比例。

¥Alternatively, you can customize just the padding scale by editing theme.padding or theme.extend.padding in your tailwind.config.js file.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      padding: {
        '5px': '5px',
      }
    }
  }
}

主题定制 文档中了解有关自定义默认主题的更多信息。

¥Learn more about customizing the default theme in the theme customization documentation.

任意值

¥Arbitrary values

如果你需要使用一次性的 padding 值,而该值没有必要包含在你的主题中,请使用方括号动态生成属性,使用任意值。

<div class="p-[5px]">
  <!-- ... -->
</div>

任意值 文档中了解有关任意值支持的更多信息。