Tailwind CSS on GitHub

内边距

控制元素内边距的功能类

Default class reference

Class
Properties
p-0padding: 0px;
p-0.5padding: 0.125rem;
p-1padding: 0.25rem;
p-1.5padding: 0.375rem;
p-2padding: 0.5rem;
p-2.5padding: 0.625rem;
p-3padding: 0.75rem;
p-3.5padding: 0.875rem;
p-4padding: 1rem;
p-5padding: 1.25rem;
p-6padding: 1.5rem;
p-7padding: 1.75rem;
p-8padding: 2rem;
p-9padding: 2.25rem;
p-10padding: 2.5rem;
p-11padding: 2.75rem;
p-12padding: 3rem;
p-14padding: 3.5rem;
p-16padding: 4rem;
p-20padding: 5rem;
p-24padding: 6rem;
p-28padding: 7rem;
p-32padding: 8rem;
p-36padding: 9rem;
p-40padding: 10rem;
p-44padding: 11rem;
p-48padding: 12rem;
p-52padding: 13rem;
p-56padding: 14rem;
p-60padding: 15rem;
p-64padding: 16rem;
p-72padding: 18rem;
p-80padding: 20rem;
p-96padding: 24rem;
p-pxpadding: 1px;
py-0padding-top: 0px; padding-bottom: 0px;
py-0.5padding-top: 0.125rem; padding-bottom: 0.125rem;
py-1padding-top: 0.25rem; padding-bottom: 0.25rem;
py-1.5padding-top: 0.375rem; padding-bottom: 0.375rem;
py-2padding-top: 0.5rem; padding-bottom: 0.5rem;
py-2.5padding-top: 0.625rem; padding-bottom: 0.625rem;
py-3padding-top: 0.75rem; padding-bottom: 0.75rem;
py-3.5padding-top: 0.875rem; padding-bottom: 0.875rem;
py-4padding-top: 1rem; padding-bottom: 1rem;
py-5padding-top: 1.25rem; padding-bottom: 1.25rem;
py-6padding-top: 1.5rem; padding-bottom: 1.5rem;
py-7padding-top: 1.75rem; padding-bottom: 1.75rem;
py-8padding-top: 2rem; padding-bottom: 2rem;
py-9padding-top: 2.25rem; padding-bottom: 2.25rem;
py-10padding-top: 2.5rem; padding-bottom: 2.5rem;
py-11padding-top: 2.75rem; padding-bottom: 2.75rem;
py-12padding-top: 3rem; padding-bottom: 3rem;
py-14padding-top: 3.5rem; padding-bottom: 3.5rem;
py-16padding-top: 4rem; padding-bottom: 4rem;
py-20padding-top: 5rem; padding-bottom: 5rem;
py-24padding-top: 6rem; padding-bottom: 6rem;
py-28padding-top: 7rem; padding-bottom: 7rem;
py-32padding-top: 8rem; padding-bottom: 8rem;
py-36padding-top: 9rem; padding-bottom: 9rem;
py-40padding-top: 10rem; padding-bottom: 10rem;
py-44padding-top: 11rem; padding-bottom: 11rem;
py-48padding-top: 12rem; padding-bottom: 12rem;
py-52padding-top: 13rem; padding-bottom: 13rem;
py-56padding-top: 14rem; padding-bottom: 14rem;
py-60padding-top: 15rem; padding-bottom: 15rem;
py-64padding-top: 16rem; padding-bottom: 16rem;
py-72padding-top: 18rem; padding-bottom: 18rem;
py-80padding-top: 20rem; padding-bottom: 20rem;
py-96padding-top: 24rem; padding-bottom: 24rem;
py-pxpadding-top: 1px; padding-bottom: 1px;
px-0padding-left: 0px; padding-right: 0px;
px-0.5padding-left: 0.125rem; padding-right: 0.125rem;
px-1padding-left: 0.25rem; padding-right: 0.25rem;
px-1.5padding-left: 0.375rem; padding-right: 0.375rem;
px-2padding-left: 0.5rem; padding-right: 0.5rem;
px-2.5padding-left: 0.625rem; padding-right: 0.625rem;
px-3padding-left: 0.75rem; padding-right: 0.75rem;
px-3.5padding-left: 0.875rem; padding-right: 0.875rem;
px-4padding-left: 1rem; padding-right: 1rem;
px-5padding-left: 1.25rem; padding-right: 1.25rem;
px-6padding-left: 1.5rem; padding-right: 1.5rem;
px-7padding-left: 1.75rem; padding-right: 1.75rem;
px-8padding-left: 2rem; padding-right: 2rem;
px-9padding-left: 2.25rem; padding-right: 2.25rem;
px-10padding-left: 2.5rem; padding-right: 2.5rem;
px-11padding-left: 2.75rem; padding-right: 2.75rem;
px-12padding-left: 3rem; padding-right: 3rem;
px-14padding-left: 3.5rem; padding-right: 3.5rem;
px-16padding-left: 4rem; padding-right: 4rem;
px-20padding-left: 5rem; padding-right: 5rem;
px-24padding-left: 6rem; padding-right: 6rem;
px-28padding-left: 7rem; padding-right: 7rem;
px-32padding-left: 8rem; padding-right: 8rem;
px-36padding-left: 9rem; padding-right: 9rem;
px-40padding-left: 10rem; padding-right: 10rem;
px-44padding-left: 11rem; padding-right: 11rem;
px-48padding-left: 12rem; padding-right: 12rem;
px-52padding-left: 13rem; padding-right: 13rem;
px-56padding-left: 14rem; padding-right: 14rem;
px-60padding-left: 15rem; padding-right: 15rem;
px-64padding-left: 16rem; padding-right: 16rem;
px-72padding-left: 18rem; padding-right: 18rem;
px-80padding-left: 20rem; padding-right: 20rem;
px-96padding-left: 24rem; padding-right: 24rem;
px-pxpadding-left: 1px; padding-right: 1px;
pt-0padding-top: 0px;
pt-0.5padding-top: 0.125rem;
pt-1padding-top: 0.25rem;
pt-1.5padding-top: 0.375rem;
pt-2padding-top: 0.5rem;
pt-2.5padding-top: 0.625rem;
pt-3padding-top: 0.75rem;
pt-3.5padding-top: 0.875rem;
pt-4padding-top: 1rem;
pt-5padding-top: 1.25rem;
pt-6padding-top: 1.5rem;
pt-7padding-top: 1.75rem;
pt-8padding-top: 2rem;
pt-9padding-top: 2.25rem;
pt-10padding-top: 2.5rem;
pt-11padding-top: 2.75rem;
pt-12padding-top: 3rem;
pt-14padding-top: 3.5rem;
pt-16padding-top: 4rem;
pt-20padding-top: 5rem;
pt-24padding-top: 6rem;
pt-28padding-top: 7rem;
pt-32padding-top: 8rem;
pt-36padding-top: 9rem;
pt-40padding-top: 10rem;
pt-44padding-top: 11rem;
pt-48padding-top: 12rem;
pt-52padding-top: 13rem;
pt-56padding-top: 14rem;
pt-60padding-top: 15rem;
pt-64padding-top: 16rem;
pt-72padding-top: 18rem;
pt-80padding-top: 20rem;
pt-96padding-top: 24rem;
pt-pxpadding-top: 1px;
pr-0padding-right: 0px;
pr-0.5padding-right: 0.125rem;
pr-1padding-right: 0.25rem;
pr-1.5padding-right: 0.375rem;
pr-2padding-right: 0.5rem;
pr-2.5padding-right: 0.625rem;
pr-3padding-right: 0.75rem;
pr-3.5padding-right: 0.875rem;
pr-4padding-right: 1rem;
pr-5padding-right: 1.25rem;
pr-6padding-right: 1.5rem;
pr-7padding-right: 1.75rem;
pr-8padding-right: 2rem;
pr-9padding-right: 2.25rem;
pr-10padding-right: 2.5rem;
pr-11padding-right: 2.75rem;
pr-12padding-right: 3rem;
pr-14padding-right: 3.5rem;
pr-16padding-right: 4rem;
pr-20padding-right: 5rem;
pr-24padding-right: 6rem;
pr-28padding-right: 7rem;
pr-32padding-right: 8rem;
pr-36padding-right: 9rem;
pr-40padding-right: 10rem;
pr-44padding-right: 11rem;
pr-48padding-right: 12rem;
pr-52padding-right: 13rem;
pr-56padding-right: 14rem;
pr-60padding-right: 15rem;
pr-64padding-right: 16rem;
pr-72padding-right: 18rem;
pr-80padding-right: 20rem;
pr-96padding-right: 24rem;
pr-pxpadding-right: 1px;
pb-0padding-bottom: 0px;
pb-0.5padding-bottom: 0.125rem;
pb-1padding-bottom: 0.25rem;
pb-1.5padding-bottom: 0.375rem;
pb-2padding-bottom: 0.5rem;
pb-2.5padding-bottom: 0.625rem;
pb-3padding-bottom: 0.75rem;
pb-3.5padding-bottom: 0.875rem;
pb-4padding-bottom: 1rem;
pb-5padding-bottom: 1.25rem;
pb-6padding-bottom: 1.5rem;
pb-7padding-bottom: 1.75rem;
pb-8padding-bottom: 2rem;
pb-9padding-bottom: 2.25rem;
pb-10padding-bottom: 2.5rem;
pb-11padding-bottom: 2.75rem;
pb-12padding-bottom: 3rem;
pb-14padding-bottom: 3.5rem;
pb-16padding-bottom: 4rem;
pb-20padding-bottom: 5rem;
pb-24padding-bottom: 6rem;
pb-28padding-bottom: 7rem;
pb-32padding-bottom: 8rem;
pb-36padding-bottom: 9rem;
pb-40padding-bottom: 10rem;
pb-44padding-bottom: 11rem;
pb-48padding-bottom: 12rem;
pb-52padding-bottom: 13rem;
pb-56padding-bottom: 14rem;
pb-60padding-bottom: 15rem;
pb-64padding-bottom: 16rem;
pb-72padding-bottom: 18rem;
pb-80padding-bottom: 20rem;
pb-96padding-bottom: 24rem;
pb-pxpadding-bottom: 1px;
pl-0padding-left: 0px;
pl-0.5padding-left: 0.125rem;
pl-1padding-left: 0.25rem;
pl-1.5padding-left: 0.375rem;
pl-2padding-left: 0.5rem;
pl-2.5padding-left: 0.625rem;
pl-3padding-left: 0.75rem;
pl-3.5padding-left: 0.875rem;
pl-4padding-left: 1rem;
pl-5padding-left: 1.25rem;
pl-6padding-left: 1.5rem;
pl-7padding-left: 1.75rem;
pl-8padding-left: 2rem;
pl-9padding-left: 2.25rem;
pl-10padding-left: 2.5rem;
pl-11padding-left: 2.75rem;
pl-12padding-left: 3rem;
pl-14padding-left: 3.5rem;
pl-16padding-left: 4rem;
pl-20padding-left: 5rem;
pl-24padding-left: 6rem;
pl-28padding-left: 7rem;
pl-32padding-left: 8rem;
pl-36padding-left: 9rem;
pl-40padding-left: 10rem;
pl-44padding-left: 11rem;
pl-48padding-left: 12rem;
pl-52padding-left: 13rem;
pl-56padding-left: 14rem;
pl-60padding-left: 15rem;
pl-64padding-left: 16rem;
pl-72padding-left: 18rem;
pl-80padding-left: 20rem;
pl-96padding-left: 24rem;
pl-pxpadding-left: 1px;

为单侧添加内边距

使用 p{t|r|b|l}-{size} 功能类控制元素一侧的内边距。

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

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-{size} 控制元素水平方向的内边距。

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

添加垂直方向的内边距

使用 py-{size} 控制元素垂直方向的内边距。

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

为所有边添加内边距

使用 p-{size} 功能类控制元素四个边的内边距。

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

响应式

要在特定的断点处控制元素的内边距,请在任何现有的 padding 功能类前添加 {screen}: 前缀。例如,将 md:py-8 类添加到一个元素中,就可以在中等及以上屏幕尺寸的情况下应用 py-8 功能。

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

关于 Tailwind 的响应式设计功能的更多信息,请查看 响应式设计 文档。


定制

内边距比例

默认情况下,Tailwind 为每个边和轴提供了 19 个固定的内边距功能类。

如果您想一次性自定义 padding、margin、width 和 height 的值,请使用您的 tailwind.config.js 文件中的 theme.spacing 部分。

  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

要只自定义 padding 值,请使用您的 tailwind.config.js 文件中的 theme.padding 部分。

  // tailwind.config.js
  module.exports = {
    theme: {
      padding: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

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

变体

默认情况下, 针对 padding 功能类,只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 padding 属性来控制为 padding 功能生成哪些变体。

例如,这个配置将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       padding: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 padding 功能,您可以通过在配置文件的 corePlugins 部分将 padding 属性设置为 false 来完全禁用它们:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     padding: false,
    }
  }