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 元素间距类示例

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

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

子元素之间的水平间距

在以下示例中，我们将使用 'space-x-*' 类在子元素之间创建水平间距。

示例

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 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-*' 类在子元素之间创建垂直间距。

示例

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 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' 类来确保子元素之间的间距添加到元素的正确侧。

示例

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 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 外边距。

打印页面