Last updated: 28 January 2026

Tailwind CSS Space Between

Add spacing between child elements in Tailwind CSS with space-x-* and space-y-* utilities. Alternative to gap for flex and flow layouts.

Interactive Space Between Playground

Try each class live and inspect the CSS output.

Utility class
space-x-4
CSS output
display: flex; column-gap: 1rem;

The space between utilities in Tailwind CSS add consistent spacing between child elements using margin. Instead of adding margin to each child individually, you apply space-x-* or space-y-* to the parent and Tailwind distributes the spacing automatically via adjacent sibling selectors. It is a convenient alternative to gap that works in flow layouts, not just flex and grid.

How to Use Tailwind Space Between

Apply space classes to a parent element to add margins between its direct children:

  • space-x-{size} - Adds horizontal margin between children (left margin on all but the first).
  • space-y-{size} - Adds vertical margin between children (top margin on all but the first).
  • space-x-reverse - Reverses the direction of horizontal spacing for RTL layouts.
  • space-y-reverse - Reverses the direction of vertical spacing for reversed flex columns.
HTML
1<div class="flex space-x-4">
2  <div class="bg-blue-500 text-white p-4 rounded">One</div>
3  <div class="bg-blue-500 text-white p-4 rounded">Two</div>
4  <div class="bg-blue-500 text-white p-4 rounded">Three</div>
5</div>
One
Two
Three

Vertical Spacing with space-y

Use space-y-* for stacked layouts where children are arranged vertically:

HTML
1<div class="space-y-4">
2  <div class="bg-indigo-100 text-indigo-800 p-4 rounded-lg">First block</div>
3  <div class="bg-indigo-100 text-indigo-800 p-4 rounded-lg">Second block</div>
4  <div class="bg-indigo-100 text-indigo-800 p-4 rounded-lg">Third block</div>
5</div>
First block
Second block
Third block

Space Between vs Gap

Both space-* and gap-* add spacing between elements, but they work differently:

  • gap uses the CSS gap property and only works in flex and grid containers. It handles wrapping gracefully.
  • space uses margin on child elements via adjacent sibling selectors. It works in any layout but doesn't account for wrapped items.
HTML
1<!-- Using gap (handles wrapping) -->
2<div class="flex flex-wrap gap-4">
3  <div class="bg-green-200 px-4 py-2 rounded">gap</div>
4  <div class="bg-green-200 px-4 py-2 rounded">handles</div>
5  <div class="bg-green-200 px-4 py-2 rounded">wrapping</div>
6</div>
7

8<!-- Using space (margin-based) -->
9<div class="flex flex-wrap space-x-4">
10  <div class="bg-amber-200 px-4 py-2 rounded">space</div>
11  <div class="bg-amber-200 px-4 py-2 rounded">may not</div>
12  <div class="bg-amber-200 px-4 py-2 rounded">wrap well</div>
13</div>

gap-4 (flex with wrap)

gap
handles
wrapping

space-x-4 (margin-based)

space
uses
margin

Use gap when you have flex or grid layouts with wrapping. Use space for simple stacks or inline elements in flow layout.

Practical Pattern: Form Layout

HTML
1<form class="max-w-md space-y-5">
2  <div>
3    <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
4    <input type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="John Doe" />
5  </div>
6  <div>
7    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
8    <input type="email" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="john@example.com" />
9  </div>
10  <div>
11    <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
12    <textarea class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" placeholder="Your message..."></textarea>
13  </div>
14  <button class="bg-blue-600 text-white px-6 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700">Submit</button>
15</form>

Practical Pattern: Tag / Chip Row

HTML
1<div class="flex space-x-2">
2  <span class="bg-blue-100 text-blue-700 text-xs font-medium px-3 py-1 rounded-full">React</span>
3  <span class="bg-green-100 text-green-700 text-xs font-medium px-3 py-1 rounded-full">Vue</span>
4  <span class="bg-purple-100 text-purple-700 text-xs font-medium px-3 py-1 rounded-full">Svelte</span>
5  <span class="bg-orange-100 text-orange-700 text-xs font-medium px-3 py-1 rounded-full">Angular</span>
6</div>
ReactVueSvelteAngular

Negative Space

You can use negative space values to overlap elements:

HTML
1<div class="flex -space-x-3">
2  <div class="w-10 h-10 rounded-full bg-blue-500 border-2 border-white flex items-center justify-center text-white text-xs font-bold">A</div>
3  <div class="w-10 h-10 rounded-full bg-green-500 border-2 border-white flex items-center justify-center text-white text-xs font-bold">B</div>
4  <div class="w-10 h-10 rounded-full bg-red-500 border-2 border-white flex items-center justify-center text-white text-xs font-bold">C</div>
5  <div class="w-10 h-10 rounded-full bg-purple-500 border-2 border-white flex items-center justify-center text-white text-xs font-bold">D</div>
6</div>
A
B
C
D

Negative spacing creates the classic avatar stack pattern seen in many apps.

Responsive Spacing

Adjust spacing at different breakpoints:

HTML
1<div class="space-y-2 md:space-y-4 lg:space-y-6">
2  <div class="bg-gray-200 p-4 rounded">Compact on mobile</div>
3  <div class="bg-gray-200 p-4 rounded">Medium on tablet</div>
4  <div class="bg-gray-200 p-4 rounded">Spacious on desktop</div>
5</div>
Compact on mobile
Medium on tablet
Spacious on desktop

Arbitrary Value Usage

Use bracket notation for custom spacing values:

HTML
1<div class="space-y-[18px]">
2  <p>Custom 18px vertical spacing</p>
3  <p>Between these paragraphs</p>
4</div>
5

6<div class="flex space-x-[0.625rem]">
7  <span>Custom horizontal spacing</span>
8  <span>Using rem values</span>
9</div>

Tailwind Space Between Class Table

ClassProperties
space-x-0margin-left: 0px;
space-x-0.5margin-left: 0.125rem;
space-x-1margin-left: 0.25rem;
space-x-2margin-left: 0.5rem;
space-x-3margin-left: 0.75rem;
space-x-4margin-left: 1rem;
space-x-5margin-left: 1.25rem;
space-x-6margin-left: 1.5rem;
space-x-8margin-left: 2rem;
space-x-10margin-left: 2.5rem;
space-x-12margin-left: 3rem;
space-y-0margin-top: 0px;
space-y-0.5margin-top: 0.125rem;
space-y-1margin-top: 0.25rem;
space-y-2margin-top: 0.5rem;
space-y-3margin-top: 0.75rem;
space-y-4margin-top: 1rem;
space-y-5margin-top: 1.25rem;
space-y-6margin-top: 1.5rem;
space-y-8margin-top: 2rem;
space-y-10margin-top: 2.5rem;
space-y-12margin-top: 3rem;
space-x-reverse--tw-space-x-reverse: 1;
space-y-reverse--tw-space-y-reverse: 1;

Worth Reading

Windframe Tailwind blocks

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe