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 內邊距類示例

在下面的示例中，我們看到了幾個上面提到的類的用例。您可以透過更改程式碼自己嘗試不同的值。

向所有邊新增內邊距

在本文中，我們將使用 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>
列印頁面
上一頁
下一頁
廣告