Tailwind CSS 内边距

在传统 CSS 中，内边距通常被称为 “补白”。合理地定义内边距，能够给内容提供 “呼吸感”，让页面体验更好。

Tailwind CSS 内边距语法

在 Tailwind CSS 中，我们可以使用 “p-” 前缀配合 “数值” 来定义元素的内边距。

语法：

p-{值}

说明：

与 “Tailwind CSS 宽高” 一样，内边距的数值也是以 4px 为一个单位。比如：

p-1：表示 padding 为 4px。
p-2：表示 padding 为 8px。
p-3：表示 padding 为 12px。
……

此外，我们还可以定义不同方向的 padding。比如：

p-{值}：用于设置 “四个方向” 的 padding，比如 “p-4” 表示上下左右四个方向的内边距都是 16px。
px-{值}：用于设置 “水平方向” 的 padding，即同时设置 padding-left 和 padding-right。
py-{值}：用于设置 “水平方向” 的 padding，即同时设置 padding-top 和 padding-bottom。
pt-（上内边距）、pb-（下内边距）、pl-（左内边距）、pr-（右内边距）。

Tailwind CSS 内边距示例

接下来，我们通过一个简单的例子来介绍一下如何使用 Tailwind CSS 来定义元素的内边距。

示例 1：定义内边距

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
    <div class="inline-block bg-green-300">
        绿叶网
    </div>
    <div class="inline-block bg-green-300 px-6 py-3">
        绿叶网
    </div>
</body>
</html>

页面效果如下图所示。

Tailwind CSS 定义内边距

分析：

对于第 1 个 div 来说，我们没有定义任何的 padding，此时文本 “绿叶网” 会紧紧地贴在边框上，视觉效果非常局促，甚至有点难看。

对于第 2 个 div 来说，我们定义了 “px-6 py-3”：

px-6：表示左、右内边距各为 6 × 4px = 24px。
py-3：表示上、下内边距各为 3 × 4px = 12px。

Tailwind CSS 内边距 “任意值”

虽然 Tailwind CSS 提供了 p-1 到 p-96 各种档位的 padding，但这些 padding 都是 4px 的倍数。在实际开发中，可能会需要一些非常特殊的 padding，比如设计师要求使用 13px。

在 Tailwind CSS 中，我们可以使用中括号 “[]” 的方式来定义任意数值的 padding。

语法：

p-[数值]

说明：

p-[13px] 表示 padding 为 13px，px-[25px] 表示水平方向上（即左 padding 和右 padding）都是 25px。

这种 “任意值” 的写法，可以绕过 Tailwind CSS 的 4px 倍数限制，从而实现像素级的精准控制。

示例 2：内边距任意值

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
    <div class="inline-block bg-green-300 px-[20px] py-[10px]">
        绿叶网
    </div>
</body>
</html>

页面效果如下图所示。

Tailwind CSS 内边距任意值

分析：

在这个例子中，我们使用任意值的方式来为 div 定义了 padding。其中：

px-[20px]：表示水平方向的 padding 都是 20px。
py-[10px]：表示垂直方向的 padding 都是 10px。

常见问题

1. 为什么我给 span 标签设置了 “py-”（即上下内边距），它却没有把上下的文字推开呢？

这是因为 span 是典型的 “行内元素（inline）”。在 CSS 的底层规则中，给行内元素设置垂直方向的 padding，背景色虽然会被撑大，但它不会影响页面的整体布局，也就是不会把上下的其他元素推开。

我们可以给 span 标签加上 inline-block 类名，将其转换为 “行内块元素”，然后定义垂直方向的内边距就会生效了。

2. 内边距可以是一个负值吗？

不可以。这是内边距与外边距最大的区别。外边距（margin）可以设置负数来让元素重叠，但内边距（padding）只能是正数，因为它代表的是 “盒子内部” 的空间，而内部空间不可能小于 0。