Tailwind CSS - 内边距
Padding 内边距是一个重要的属性，用于在任何元素上创建内部空间。CSS 内边距属性 可以用 Tailwind CSS 内边距类替换。
Tailwind CSS Padding 内边距类
以下提到的类可用于控制元素的内边距。
| 类别 | 描述 |
|---|---|
| p-* | 此类的有效值例如 p-0、p-0.5、p-1、p-1.5 等可用于添加内边距。 |
| py-* | 此类的有效值例如 py-0、py-0.5、py-1、py-1.5 等可用于添加垂直内边距。 |
| px-* | 此类的有效值例如 px-0、px-0.5、px-1、px-1.5 等可用于添加水平内边距。 |
| pt-* | 此类的有效值例如 pt-0、pt-0.5、pt-1、pt-1.5等，可用于添加顶部内边距。 |
| pr-* | 此类的有效值包括 pr-0、pr-0.5、pr-1、pr-1.5 等，可用于添加右侧内边距。 |
| pb-* | 此类的有效值包括 pb-0、pb-0.5、pb-1、pb-1.5 等，可用于添加底部内边距。 |
| pl-* | 此类的有效值包括 pl-0、pl-0.5、pl-1、pl-1.5 等，可用于添加内边距左侧。 |
| ps-* | 此类的有效值包括 ps-0、ps-0.5、ps-1、ps-1.5 等，可用于在行首添加内边距。 |
| pe-* | 此类的有效值包括 pe-0、pe-0.5、pe-1、pe-1.5 等，可用于在行尾添加内边距。 |
注意: *(astrick) 的值可以是 0 到任何可接受的有效数字。
Tailwind CSS 内边距类示例
在下面的示例中，我们将看到上述几个类的用例。您可以通过修改代码自行尝试不同的值。
为所有边添加内边距
在本文中，我们将使用 Tailwind CSS 的 'p-*' 类为每个元素的所有边创建具有不同值的内边距。
示例
<!DOCTYPE html>
<html>
<head>
<!-- Tailwind CSS CDN Link -->
<script src=
"https://cdn.tailwindcss.com?plugins=aspect-ratio">
</script>
</head>
<body>
<div class="m-5">
<p class="text-3xl font-bold">
Tailwind CSS Padding
</p>
<p>
The light green section of the below
squares is the padding area.
</p>
<div class="text-center">
<!-- Tailwind CSS Padding Class is Used on Parent div-->
<div class="p-0 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">p-0</div>
</div>
<div class="p-1 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">p-1</div>
</div>
<div class="p-2 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">p-2</div>
</div>
<div class="p-4 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">p-4</div>
</div>
</div>
</body>
</html>
为单边添加内边距
在下面的示例中，我们使用了四个不同的类，例如 'pt-*'、'pr-*'、'pb-*' 和 'pl-*'，分别在四个不同元素的单边设置内边距。
示例
<!DOCTYPE html>
<html>
<head>
<!-- Tailwind CSS CDN Link -->
<script src=
"https://cdn.tailwindcss.com?plugins=aspect-ratio">
</script>
</head>
<body>
<div class="m-5">
<p class="text-3xl font-bold">
Tailwind CSS Padding
</p>
<p>
The light green section of the below
squares is the padding area.
</p>
<div class="text-center">
<!-- Tailwind CSS Padding Class is Used on Parent div-->
<div class="pt-4 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">pt-4</div>
</div>
<div class="pr-4 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">pr-4</div>
</div>
<div class="pb-4 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">pb-4</div>
</div>
<div class="pl-4 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">pl-4</div>
</div>
</div>
</body>
</html>
X 轴内边距
在此示例中，我们将使用 'px-*' 类，并为不同的元素设置不同的值。
示例
<!DOCTYPE html>
<html>
<head>
<!-- Tailwind CSS CDN Link -->
<script src="https://cdn.tailwindcss.com?plugins=aspect-ratio"></script>
</head>
<body>
<div class="m-5">
<p class="text-3xl font-bold">
Tailwind CSS Padding
</p>
<p>
The light green section of the below
squares is the padding area.
</p>
<div class="text-center">
<!-- Tailwind CSS Padding Class is Used on Parent div-->
<div class="px-4 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">px-4</div>
</div>
</div>
</body>
</html>
Y 轴内边距
在此示例中，我们将使用 'py-*' 类，并为不同的元素设置不同的值。
示例
<!DOCTYPE html>
<html>
<head>
<!-- Tailwind CSS CDN Link -->
<script src="https://cdn.tailwindcss.com?plugins=aspect-ratio"></script>
</head>
<body>
<div class="m-5">
<p class="text-3xl font-bold">
Tailwind CSS Padding
</p>
<p>
The light green section of the below
squares is the padding area.
</p>
<div class="text-center">
<!-- Tailwind CSS Padding Class is Used on Parent div-->
<div class="py-4 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">py-4</div>
</div>
</div>
</body>
</html>
逻辑内边距
在下面的示例中，我们使用 'ps-*' 和 'pe-*' 类根据内容方向设置内边距。
示例
<!DOCTYPE html>
<html>
<head>
<!-- Tailwind CSS CDN Link -->
<script src="https://cdn.tailwindcss.com?plugins=aspect-ratio"></script>
</head>
<body>
<div class="m-5">
<p class="text-3xl font-bold">
Tailwind CSS Padding
</p>
<p>
The light green section of the below
squares is the padding area.
</p>
<div class="text-center" dir="ltr">
<!-- Tailwind CSS Padding Class is Used on Parent div-->
<div class="ps-4 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">ps-4</div>
</div>
<div class="pe-4 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">pe-4</div>
</div>
</div>
<div class="text-center" dir="rtl">
<!-- Tailwind CSS Padding Class is Used on Parent div-->
<div class="ps-4 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">ps-4</div>
</div>
<div class="pe-4 m-2 border border-green-600 bg-green-200 w-max">
<div class="bg-green-600 w-16 h-16">pe-4</div>
</div>
</div>
</body>
</html>
