Tailwind CSS - Space Between

Previous
Quiz
Next

Space Between is used to create gaps or space between child elements of any container. CSS margin-top, margin-right, margin-bottom, margin-left, --tw-space-y-reverse, and --tw-space-x-reverse can be replaced by the class of space between.

Tailwind CSS Space Between Classes

Below mentioned classes can be used to control the space between child elements.

Class Description
space-x-* This class with a valid value like space-x-0, space-x-0.5, space-x-1, space-x-1.5, etc. can be used to add horizontal space between child elements.
space-y-* This class with a valid value like space-y-0, space-y-0.5, space-y-1, space-y-1.5, etc. can be used to add vertical space between child elements.
space-x-px This class is used to add 1px horizontal space between child elements.
space-y-px This class is used to add 1px vertical space between child elements.
space-x-reverse This class is used to ensure that the horizontal space between child elements is added to the correct side of the element.
space-y-reverse This class is used to ensure that the vertical space between child elements is added to the correct side of the element.

Note: The * (asterisk) can have the value from 0 to any valid acceptable number.

Tailwind CSS Space Between Classes Examples

In the below examples, we see the use cases of a few above mentioned classes. You can try different values on your own by changing the code.

Horizontal Space Between Child Elements

In the following example, we are going to create horizontal spacing between child elements by using 'space-x-*' classes.

Example

<!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>

Vertical Space Between Child Elements

In the following example, we are going to create vertical spacing between child elements by using 'space-y-*' classes.

Example

<!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>

Reverse Child Elements Order & Added Spacing

In the following code, we have used the 'space-x-reverse' and 'space-y-reverse' classes to ensure that the space between child elements is added to the correct side of the element.

Example

<!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>

Limitations of Space Between

These classes are created as a shortcut for adding side-specific margins on child elements. These are not recommended to use on complex cases like grid layouts, etc. In this case, you can use Tailwind CSS Gap. Do not use this with Tailwind CSS Divide Width rather, you can use Tailwind CSS Padding or Tailwind CSS Margin.

Print Page
Previous
Next