Bird
Raised Fist0
Tailwindmarkup~5 mins

Space between children (space-x, space-y) in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

We use space-x and space-y to add equal space between items inside a container. It helps keep things neat and easy to read.

When you want to add horizontal space between buttons in a toolbar.
When you need vertical space between list items in a menu.
When arranging cards or boxes side by side with consistent gaps.
When creating a column of text blocks with even spacing.
When you want to avoid manually adding margin to each child element.
Syntax
Tailwind
space-x-{size}
space-y-{size}

space-x adds horizontal space between children.

space-y adds vertical space between children.

Examples
This adds horizontal space of size 4 between buttons in a row.
Tailwind
<div class="flex space-x-4">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
This adds vertical space of size 2 between paragraphs stacked in a column.
Tailwind
<div class="flex flex-col space-y-2">
  <p>First line</p>
  <p>Second line</p>
  <p>Third line</p>
</div>
This adds horizontal space of size 6 between grid items in a row.
Tailwind
<div class="grid grid-cols-3 gap-x-6">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>
Sample Program

This page shows two examples: a row of buttons spaced horizontally with space-x-4, and a column of paragraphs spaced vertically with space-y-3. The spacing is consistent and automatic.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Space Between Children Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-bold mb-4">Buttons with space-x-4</h1>
  <div class="flex space-x-4">
    <button class="bg-blue-500 text-white px-4 py-2 rounded">One</button>
    <button class="bg-blue-500 text-white px-4 py-2 rounded">Two</button>
    <button class="bg-blue-500 text-white px-4 py-2 rounded">Three</button>
  </div>

  <h1 class="text-xl font-bold mt-8 mb-4">Paragraphs with space-y-3</h1>
  <div class="flex flex-col space-y-3">
    <p class="bg-gray-200 p-3 rounded">First paragraph</p>
    <p class="bg-gray-200 p-3 rounded">Second paragraph</p>
    <p class="bg-gray-200 p-3 rounded">Third paragraph</p>
  </div>
</body>
</html>
OutputSuccess
Important Notes

The space-x and space-y classes only add space between children, not outside the container.

They work best when the parent uses flex or grid layout.

You can combine space-x and space-y for two-dimensional spacing.

Summary

space-x adds horizontal space between child elements.

space-y adds vertical space between child elements.

Use these classes to keep your layout neat without adding margin to each child.

Practice

(1/5)
1. What does the Tailwind class space-x-4 do when applied to a container with multiple child elements?
easy
A. Adds padding of 1rem inside each child element
B. Adds horizontal space of 1rem between each child element
C. Adds vertical space of 1rem between each child element
D. Adds margin of 1rem around the container

Solution

  1. Step 1: Understand the space-x class

    The space-x class adds horizontal space between child elements inside a container.

  2. Step 2: Interpret the number 4

    In Tailwind, 4 corresponds to 1rem (16px) spacing.

  3. Final Answer:

    Adds horizontal space of 1rem between each child element -> Option B

  4. Quick Check:

    space-x-4 = horizontal 1rem space [OK]
Hint: Remember: space-x adds horizontal gaps, space-y adds vertical [OK]
Common Mistakes:
  • Confusing space-x with space-y
  • Thinking it adds margin to container instead of between children
  • Assuming it adds padding inside children
2. Which of the following is the correct Tailwind syntax to add vertical space of 0.5rem between child elements?
easy
A. space-y-2
B. space-x-2
C. space-y-1
D. space-x-1

Solution

  1. Step 1: Identify vertical spacing class

    Vertical spacing between children uses space-y classes.

  2. Step 2: Match spacing scale

    In Tailwind, 2 equals 0.5rem spacing.

  3. Final Answer:

    space-y-2 -> Option A

  4. Quick Check:

    Vertical 0.5rem space = space-y-2 [OK]
Hint: Use space-y for vertical gaps, number matches rem scale [OK]
Common Mistakes:
  • Using space-x instead of space-y for vertical spacing
  • Mixing spacing scale numbers
  • Confusing margin and space classes
3. Given this HTML snippet:
<div class="flex space-x-6">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>

What is the horizontal space between each button in pixels?
medium
A. 12px
B. 16px
C. 6px
D. 24px

Solution

  1. Step 1: Understand the class space-x-6

    The space-x-6 class adds horizontal space between children.

  2. Step 2: Convert Tailwind spacing scale to pixels

    In Tailwind, 6 equals 1.5rem. Since 1rem = 16px, 1.5rem = 24px.

  3. Final Answer:

    24px -> Option D

  4. Quick Check:

    space-x-6 = 1.5rem = 24px [OK]
Hint: Tailwind spacing 6 = 1.5rem = 24px horizontal gap [OK]
Common Mistakes:
  • Confusing rem to px conversion
  • Mixing space-x with space-y
  • Assuming spacing is smaller than actual
4. You want to add vertical space between list items but accidentally use space-x-4 on a vertical stack. What will happen?
medium
A. No visible vertical space is added between items
B. Vertical space of 1rem is added correctly
C. Horizontal space of 1rem is added but items remain stacked vertically
D. The layout breaks and items overlap

Solution

  1. Step 1: Understand space-x-4 effect

    space-x-4 adds horizontal space between children, not vertical.

  2. Step 2: Consider vertical stacking

    If items are stacked vertically (default block), horizontal space adds gaps horizontally but does not separate vertically.

  3. Final Answer:

    Horizontal space of 1rem is added but items remain stacked vertically -> Option C

  4. Quick Check:

    space-x adds horizontal gaps, vertical stack stays vertical [OK]
Hint: Use space-y for vertical stacks, space-x for horizontal rows [OK]
Common Mistakes:
  • Expecting vertical space from space-x
  • Thinking space-x breaks vertical layout
  • Confusing margin and space utilities
5. You have a grid of cards arranged in 3 columns. You want to add 1rem horizontal space between columns and 0.5rem vertical space between rows using Tailwind. Which class combination should you use on the grid container?
hard
A. space-x-4 space-y-2
B. space-x-2 space-y-4
C. space-x-4 space-y-4
D. space-x-2 space-y-2

Solution

  1. Step 1: Match spacing values to Tailwind scale

    1rem corresponds to 4 and 0.5rem corresponds to 2 in Tailwind spacing scale.

  2. Step 2: Assign horizontal and vertical spacing

    Horizontal space between columns uses space-x-4, vertical space between rows uses space-y-2.

  3. Final Answer:

    space-x-4 space-y-2 -> Option A

  4. Quick Check:

    1rem horizontal + 0.5rem vertical = space-x-4 space-y-2 [OK]
Hint: Match rem values to spacing scale: 1rem=4, 0.5rem=2 [OK]
Common Mistakes:
  • Swapping horizontal and vertical spacing values
  • Using wrong spacing scale numbers
  • Applying space-x or space-y incorrectly on grid