0
0
Tailwindmarkup~5 mins

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

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.