Tailwind CSS - Space Between
Space Between 用于在任何容器的子元素之间创建间隙或空间。CSS 中的 margin-top、margin-right、margin-bottom、margin-left、--tw-space-y-reverse 和 --tw-space-x-reverse 类都可以替换为 space between。
Tailwind CSS Space Between 类
以下类可用于控制子元素之间的空间。
| 类别 | 描述 |
|---|---|
| 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 Gap。请勿将其与 Tailwind CSS Divide Width 一起使用，而可以使用 Tailwind CSS Padding 或 Tailwind CSS Margin。
