Tailwind CSS - 内边距

上一页
下一页

内边距是一个重要的属性，用于在任何元素上创建内部空间。**CSS 内边距属性** 可以被 Tailwind CSS 内边距类替换。

Tailwind CSS 内边距类

下面提到的类可以用来控制元素的内边距。

类 描述
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 等，可用于添加内联结束内边距。

注意：*(星号) 可以取值为 0 到任何有效可接受的数字。

Tailwind CSS 内边距类示例

在下面的示例中，我们看到了几个上面提到的类的用例。您可以通过更改代码自己尝试不同的值。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

向所有边添加内边距

在本文中，我们将使用 Tailwind CSS 的 **'p-*'** 类为每个元素的所有边添加不同的内边距值。

示例

Open Compiler
<!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-*'**，分别为四个不同元素的各个边设置内边距。

示例

Open Compiler
<!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-*'** 类，为不同的元素使用不同的值。

示例

Open Compiler
<!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-*'** 类，为不同的元素使用不同的值。

示例

Open Compiler
<!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-*'** 类根据内容方向设置内边距。

示例

Open Compiler
<!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>
打印页面
上一页
下一页
广告