Tailwind CSS 内边距

内边距

控制元素内边距的功能类

为单侧添加内边距

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

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

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

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

添加垂直方向的内边距

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

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

为所有边添加内边距

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

<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,
    }
  }