Padding 填充

控制元素填充的实用工具。

Class	Properties

基本用法

在单侧添加填充

使用 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>

使用逻辑属性

使用 ps-* 和 pe-* 实用工具来设置 padding-inline-start 和 padding-inline-end 逻辑属性，这些属性根据文本方向映射到左侧或右侧。

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 修饰符，根据当前文本方向有条件地应用特定样式。

有条件地应用

悬停，焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:py-8 只在悬停时应用 py-8 实用程序。

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

要查看所有可用状态修饰符的完整列表，请查看悬停，焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，如响应式断点、暗模式、偏好减少动作等。例如，使用 md:py-8 仅在中等屏幕尺寸及以上应用 py-8 实用程序。

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

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修改器的文档。

使用自定义值

自定义您的主题

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

tailwind.config.js

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

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

tailwind.config.js

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

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

任意值

如果您需要使用一次性 padding 值，而这个值在您的主题中没有意义，可以使用方括号来使用任意值动态生成属性。

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

了解有关任意值支持的更多信息，请参阅任意值文档。