Tailwind CSS - 間距 (Gap)

上一頁
下一頁

Tailwind CSS 間距 (Gap) 是一個實用程式類，用於在網格和彈性專案之間新增空格。

Tailwind CSS 間距類

以下是Tailwind CSS 間距 (Gap) 類的列表，有助於在網格和彈性專案之間插入空格。

類 CSS 屬性
gap-0 gap: 0px;
gap-x-0 column-gap: 0px;
gap-y-0 row-gap: 0px;
gap-px gap: 1px;
gap-x-px column-gap: 1px;
gap-y-px row-gap: 1px;
gap-0.5 gap: 0.125rem; /* 2px */
gap-x-0.5 column-gap: 0.125rem; /* 2px */
gap-y-0.5 row-gap: 0.125rem; /* 2px */
gap-1 gap: 0.25rem; /* 4px */
gap-x-1 column-gap: 0.25rem; /* 4px */
gap-y-1 row-gap: 0.25rem; /* 4px */
gap-1.5 gap: 0.375rem; /* 6px */
gap-x-1.5 column-gap: 0.375rem; /* 6px */
gap-y-1.5 row-gap: 0.375rem; /* 6px */
gap-2 gap: 0.5rem; /* 8px */
gap-x-2 column-gap: 0.5rem; /* 8px */
gap-y-2 row-gap: 0.5rem; /* 8px */
gap-2.5 gap: 0.625rem; /* 10px */
gap-x-2.5 column-gap: 0.625rem; /* 10px */
gap-y-2.5 row-gap: 0.625rem; /* 10px */
gap-3 gap: 0.75rem; /* 12px */
gap-x-3 column-gap: 0.75rem; /* 12px */
gap-y-3 row-gap: 0.75rem; /* 12px */
gap-3.5 gap: 0.875rem; /* 14px */
gap-x-3.5 column-gap: 0.875rem; /* 14px */
gap-y-3.5 row-gap: 0.875rem; /* 14px */
gap-4 gap: 1rem; /* 16px */
gap-x-4 column-gap: 1rem; /* 16px */
gap-y-4 row-gap: 1rem; /* 16px */
gap-5 gap: 1.25rem; /* 20px */
gap-x-5 column-gap: 1.25rem; /* 20px */
gap-y-5 row-gap: 1.25rem; /* 20px */
gap-6 gap: 1.5rem; /* 24px */
gap-x-6 column-gap: 1.5rem; /* 24px */
gap-y-6 row-gap: 1.5rem; /* 24px */
gap-7 gap: 1.75rem; /* 28px */
gap-x-7 column-gap: 1.75rem; /* 28px */
gap-y-7 row-gap: 1.75rem; /* 28px */
gap-8 gap: 2rem; /* 32px */
gap-x-8 column-gap: 2rem; /* 32px */
gap-y-8 row-gap: 2rem; /* 32px */
gap-9 gap: 2.25rem; /* 36px */
gap-x-9 column-gap: 2.25rem; /* 36px */
gap-y-9 row-gap: 2.25rem; /* 36px */
gap-10 gap: 2.5rem; /* 40px */
gap-x-10 column-gap: 2.5rem; /* 40px */
gap-y-10 row-gap: 2.5rem; /* 40px */
gap-11 gap: 2.75rem; /* 44px */
gap-x-11 column-gap: 2.75rem; /* 44px */
gap-y-11 row-gap: 2.75rem; /* 44px */
gap-12 gap: 3rem; /* 48px */
gap-x-12 column-gap: 3rem; /* 48px */
gap-y-12 row-gap: 3rem; /* 48px */
gap-14 gap: 3.5rem; /* 56px */
gap-x-14 column-gap: 3.5rem; /* 56px */
gap-y-14 row-gap: 3.5rem; /* 56px */
gap-16 gap: 4rem; /* 64px */
gap-x-16 column-gap: 4rem; /* 64px */
gap-y-16 row-gap: 4rem; /* 64px */
gap-20 gap: 5rem; /* 80px */
gap-x-20 column-gap: 5rem; /* 80px */
gap-y-20 row-gap: 5rem; /* 80px */
gap-24 gap: 6rem; /* 96px */
gap-x-24 column-gap: 6rem; /* 96px */
gap-y-24 row-gap: 6rem; /* 96px */
gap-28 gap: 7rem; /* 112px */
gap-x-28 column-gap: 7rem; /* 112px */
gap-y-28 row-gap: 7rem; /* 112px */
gap-32 gap: 8rem; /* 128px */
gap-x-32 column-gap: 8rem; /* 128px */
gap-y-32 row-gap: 8rem; /* 128px */
gap-36 gap: 9rem; /* 144px */
gap-x-36 column-gap: 9rem; /* 144px */
gap-y-36 row-gap: 9rem; /* 144px */
gap-40 gap: 10rem; /* 160px */
gap-x-40 column-gap: 10rem; /* 160px */
gap-y-40 row-gap: 10rem; /* 160px */
gap-44 gap: 11rem; /* 176px */
gap-x-44 column-gap: 11rem; /* 176px */
gap-y-44 row-gap: 11rem; /* 176px */
gap-48 gap: 12rem; /* 192px */
gap-x-48 column-gap: 12rem; /* 192px */
gap-y-48 row-gap: 12rem; /* 192px */
gap-52 gap: 13rem; /* 208px */
gap-x-52 column-gap: 13rem; /* 208px */
gap-y-52 row-gap: 13rem; /* 208px */
gap-56 gap: 14rem; /* 224px */
gap-x-56 column-gap: 14rem; /* 224px */
gap-y-56 row-gap: 14rem; /* 224px */
gap-60 gap: 15rem; /* 240px */
gap-x-60 column-gap: 15rem; /* 240px */
gap-y-60 row-gap: 15rem; /* 240px */
gap-64 gap: 16rem; /* 256px */
gap-x-64 column-gap: 16rem; /* 256px */
gap-y-64 row-gap: 16rem; /* 256px */
gap-72 gap: 18rem; /* 288px */
gap-x-72 column-gap: 18rem; /* 288px */
gap-y-72 row-gap: 18rem; /* 288px */
gap-80 gap: 20rem; /* 320px */
gap-x-80 column-gap: 20rem; /* 320px */
gap-y-80 row-gap: 20rem; /* 320px */
gap-96 gap: 24rem; /* 384px */
gap-x-96 column-gap: 24rem; /* 384px */
gap-y-96 row-gap: 24rem; /* 384px */

Tailwind CSS 間隙類功能

  • gap-*：此類用於在行和列之間分別插入間隙，其中{*}表示間隙比例，可以用所需的值替換。
  • gap-x-*：此類用於在行之間或水平方向插入間隙，其中{*}表示間隙比例，可以用所需的值替換。
  • gap-y-*：此類用於在列之間或垂直方向插入間隙，其中{*}表示間隙比例，可以用所需的值替換。

Tailwind CSS 間隙類示例

以下示例將說明 Tailwind CSS 間隙類實用程式。

Flex 專案間距

gap-* 實用程式用於在 flex 專案之間同時新增行和列間隙，如下例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Gap Class on flex Container
    </h2>
    <div class="flex flex-wrap gap-4">
        <div class="bg-green-500 p-6 w-28 h-28 ">01</div>
        <div class="bg-green-300 p-6 w-28 h-28">02</div>
        <div class="bg-green-500 p-6 w-28 h-28">03</div>
        <div class="bg-green-300 p-6 w-28 h-28">04</div>
        <div class="bg-green-500 p-6 w-28 h-28">05</div>
        <div class="bg-green-300 p-6 w-28 h-28">06</div>
    </div>
</body>

</html>

網格專案間距

gap-* 實用程式用於在網格專案之間同時新增行和列間隙，如下例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Gap Class on Grid Container
    </h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-green-500 p-6 w-full h-28 ">01</div>
        <div class="bg-green-300 p-6 w-full h-28">02</div>
        <div class="bg-green-500 p-6 w-full h-28">03</div>
        <div class="bg-green-300 p-6 w-full h-28">04</div>
        <div class="bg-green-500 p-6 w-full h-28">05</div>
        <div class="bg-green-300 p-6 w-full h-28">06</div>
    </div>
</body>

</html>

Flex 專案在行和列中的間距

gap-x-* 和 gap-y-* 實用程式用於在 flex 專案的行和列之間新增間隙，如下例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Gap-x-3 & Gap-y-3 Class on Flex Container
    </h2>
    <div class="flex flex-wrap gap-x-3 gap-y-3">
        <div class="bg-green-500 p-6 w-28 h-28 ">01</div>
        <div class="bg-green-300 p-6 w-28 h-28">02</div>
        <div class="bg-green-500 p-6 w-28 h-28">03</div>
        <div class="bg-green-300 p-6 w-28 h-28">04</div>
        <div class="bg-green-500 p-6 w-28 h-28">05</div>
        <div class="bg-green-300 p-6 w-28 h-28">06</div>
    </div>
</body>

</html>

網格專案在行和列中的間距

gap-x-* 和 gap-y-* 實用程式用於在網格專案之間新增行間隙和列間隙，如下例所示。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Gap-x-4 & Gap-y-4 Class on Grid Container
    </h2>
    <div class="grid grid-cols-3 gap-x-3 gap-y-3">
        <div class="bg-green-500 p-6 w-full h-28 ">01</div>
        <div class="bg-green-300 p-6 w-full h-28">02</div>
        <div class="bg-green-500 p-6 w-full h-28">03</div>
        <div class="bg-green-300 p-6 w-full h-28">04</div>
        <div class="bg-green-500 p-6 w-full h-28">05</div>
        <div class="bg-green-300 p-6 w-full h-28">06</div>
    </div>
</body>

</html>
列印頁面
上一頁
下一頁
廣告