Tailwind CSS - 元素間距

Space Between 用於在任何容器的子元素之間建立間隙或空間。CSS 的 margin-top, margin-right, margin-bottom, margin-left, --tw-space-y-reverse 和 --tw-space-x-reverse 可以被 space between 類替換。

Tailwind CSS 元素間距類

下面提到的類可用於控制子元素之間的間距。

類	描述
space-x-*	此類帶有有效值，如 space-x-0、space-x-0.5、space-x-1、space-x-1.5 等，可用於在子元素之間新增水平間距。
space-y-*	此類帶有有效值，如 space-y-0、space-y-0.5、space-y-1、space-y-1.5 等，可用於在子元素之間新增垂直間距。
space-x-px	此類用於在子元素之間新增 1px 水平間距。
space-y-px	此類用於在子元素之間新增 1px 垂直間距。
space-x-reverse	此類用於確保子元素之間的水平間距新增到元素的正確側。
space-y-reverse	此類用於確保子元素之間的垂直間距新增到元素的正確側。

注意：*（星號）的值可以從 0 到任何有效的可接受數字。

Tailwind CSS 元素間距類示例

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

子元素之間的水平間距

在以下示例中，我們將使用 'space-x-*' 類在子元素之間建立水平間距。

示例

<!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 Space Between
        </p>
        <p>
           Used space-x-* to generate horizontal 
           space between child elements.
        </p>
        <!-- Tailwind CSS Space Between Class is used -->
        <div class="flex text-center space-x-4">
            <div class="bg-green-600 w-16 h-16">Child 1</div>
            <div class="bg-green-600 w-16 h-16">Child 2</div>
            <div class="bg-green-600 w-16 h-16">Child 3</div>
            <div class="bg-green-600 w-16 h-16">Child 4</div>
        </div>
    </div>
</body>

</html>

子元素之間的垂直間距

在以下示例中，我們將使用 'space-y-*' 類在子元素之間建立垂直間距。

示例

<!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 Space Between
        </p>
        <p>
           Used space-y-* to generate vertical 
           space between child elements.
        </p>
        <!-- Tailwind CSS Space Between Class is used -->
        <div class="flex flex-col text-center space-y-4">
            <div class="bg-green-600 w-16 h-16">Child 1</div>
            <div class="bg-green-600 w-16 h-16">Child 2</div>
            <div class="bg-green-600 w-16 h-16">Child 3</div>
            <div class="bg-green-600 w-16 h-16">Child 4</div>
        </div>
    </div>
</body>

</html>

反轉子元素順序並新增間距

在以下程式碼中，我們使用了 'space-x-reverse' 和 'space-y-reverse' 類來確保子元素之間的間距新增到元素的正確側。

示例

<!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 Space Between
        </p>
        <p>
           Used space-x-reverse or space-y-reverse to generate 
           horizontal and vertical reverse order space between child elements.
        </p> 
        <p class="text-xl font-bold">
            Tailwind CSS Space Between - space-x-reverse
        </p>
        <!-- Tailwind CSS Space Between Class is used -->
        <div class="flex text-center flex-row-reverse 
                    space-x-4 space-x-reverse" >
            <div class="bg-green-600 w-16 h-16">Child 1</div>
            <div class="bg-green-600 w-16 h-16">Child 2</div>
            <div class="bg-green-600 w-16 h-16">Child 3</div>
            <div class="bg-green-600 w-16 h-16">Child 4</div>
        </div>
        
        <p class="text-xl font-bold">
            Tailwind CSS Space Between - space-x-reverse
        </p>
        <!-- Tailwind CSS Space Between Class is used -->
        <div class="flex text-center flex-col-reverse 
                    space-y-4 space-y-reverse flex-col" >
            <div class="bg-green-600 w-16 h-16">Child 1</div>
            <div class="bg-green-600 w-16 h-16">Child 2</div>
            <div class="bg-green-600 w-16 h-16">Child 3</div>
            <div class="bg-green-600 w-16 h-16">Child 4</div>
        </div>
    </div>
</body>

</html>

元素間距的侷限性

這些類被建立為在子元素上新增特定方向邊距的快捷方式。不建議在複雜情況下使用它們，例如網格佈局等。在這種情況下，您可以使用 Tailwind CSS 間隙。不要與 Tailwind CSS 分隔線寬度 一起使用，而是可以使用 Tailwind CSS 內邊距 或 Tailwind CSS 外邊距。

列印頁面