Tailwind CSS - 内边距

Tailwind CSS：内边距

Tailwind CSS 中的内边距（Padding）工具类用于在元素内部创建空间，将其内容推离其边框。这些工具类是控制布局和间距的基础，它们建立在一个一致且可定制的间距体系之上。

理解间距体系

Tailwind 的内边距工具类（如 p-4）不直接对应原始像素值。相反，它们映射到一个预定义的间距体系，其中 p-4 通常等于 1rem（默认情况下为 16px）。这个系统确保了您的整个应用程序具有一致的间距。这个间距体系可在您的 tailwind.config.js 文件中完全自定义。

内边距类参考

您可以将内边距应用于元素的所有边、特定轴（水平/垂直）或单一边。

类模式	描述
`p-{amount}`	向所有四个边添加相等的内边距。
`py-{amount}`	向垂直（Y轴）方向（上下两侧）添加内边距。
`px-{amount}`	向水平（X轴）方向（左右两侧）添加内边距。
`pt-{amount}`	向顶部添加内边距。
`pr-{amount}`	向右侧添加内边距。
`pb-{amount}`	向底部添加内边距。
`pl-{amount}`	向左侧添加内边距。
`ps-{amount}`	逻辑属性：向“行内起始”侧添加内边距（在从左到右 (LTR) 语言中是左侧，在从右到左 (RTL) 语言中是右侧）。
`pe-{amount}`	逻辑属性：向“行内结束”侧添加内边距（在从左到右 (LTR) 语言中是右侧，在从右到左 (RTL) 语言中是左侧）。

实际应用与示例

以下示例演示了如何使用各种内边距工具类来样式化卡片组件。浅绿色区域可视化地展示了所应用的内边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Padding Example</title>
</head>
<body class="bg-slate-100 p-8 flex flex-wrap gap-8 justify-center">

    <!-- Card with uniform padding -->
    <div class="w-64 bg-green-200 rounded-lg border border-green-500 p-4">
        <div class="bg-green-600 text-white p-4 rounded">
            <h3 class="font-bold">统一内边距</h3>
            <p class="text-sm">Class: `p-4`</p>
        </div>
    </div>

    <!-- Card with axis padding -->
    <div class="w-64 bg-blue-200 rounded-lg border border-blue-500 px-6 py-3">
        <div class="bg-blue-600 text-white p-4 rounded">
            <h3 class="font-bold">轴向内边距</h3>
            <p class="text-sm">Classes: `px-6 py-3`</p>
        </div>
    </div>

    <!-- Card with single-side padding -->
    <div class="w-64 bg-red-200 rounded-lg border border-red-500 pt-8 pb-4 pl-2 pr-10">
        <div class="bg-red-600 text-white p-4 rounded">
            <h3 class="font-bold">单边内边距</h3>
            <p class="text-sm">Classes: `pt-8 pb-4 pl-2 pr-10`</p>
        </div>
    </div>

</body>
</html>

使用任意值

现代 Tailwind CSS 允许您为主题间距体系未涵盖的一次性间距需求使用任意值。使用方括号 [] 来指定自定义值。

<!-- 这个元素顶部将有 13px 的内边距 -->
<div class="pt-[13px]">...</div>

<!-- 您也可以使用其他单位 -->
<div class="p-[2.5rem]">...</div>

常见错误

内边距 vs. 外边距：请记住，padding 在元素的边框内部创建空间，而 margin (m-*) 在其边框外部创建空间。使用内边距来增加内容与其自身边框之间的空间，使用外边距来增加两个独立元素之间的空间。
与 px 单位的混淆：类 px-4 应用的是间距体系中的水平内边距。它不等同于 padding: 4px;。这是初学者常见的混淆点。