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.

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
<div class="flex space-x-4">
  <div class="bg-blue-500 text-white p-4 rounded">One</div>
  <div class="bg-blue-500 text-white p-4 rounded">Two</div>
  <div class="bg-blue-500 text-white p-4 rounded">Three</div>
</div>

Preview

One
Two
Three

Vertical Spacing with space-y

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

html
<div class="space-y-4">
  <div class="bg-indigo-100 text-indigo-800 p-4 rounded-lg">First block</div>
  <div class="bg-indigo-100 text-indigo-800 p-4 rounded-lg">Second block</div>
  <div class="bg-indigo-100 text-indigo-800 p-4 rounded-lg">Third block</div>
</div>

Preview

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
<!-- Using gap (handles wrapping) -->
<div class="flex flex-wrap gap-4">
  <div class="bg-green-200 px-4 py-2 rounded">gap</div>
  <div class="bg-green-200 px-4 py-2 rounded">handles</div>
  <div class="bg-green-200 px-4 py-2 rounded">wrapping</div>
</div>


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

Preview

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
<form class="max-w-md space-y-5">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
    <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" />
  </div>
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
    <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" />
  </div>
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
    <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>
  </div>
  <button class="bg-blue-600 text-white px-6 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700">Submit</button>
</form>

Preview

Practical Pattern: Tag / Chip Row

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

Preview

ReactVueSvelteAngular

Negative Space

You can use negative space values to overlap elements:

html
<div class="flex -space-x-3">
  <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>
  <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>
  <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>
  <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>
</div>

Preview

A
B
C
D

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

Responsive Spacing

Adjust spacing at different breakpoints:

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

Preview

Compact on mobile
Medium on tablet
Spacious on desktop

Arbitrary Value Usage

Use bracket notation for custom spacing values:

html
<div class="space-y-[18px]">
  <p>Custom 18px vertical spacing</p>
  <p>Between these paragraphs</p>
</div>


<div class="flex space-x-[0.625rem]">
  <span>Custom horizontal spacing</span>
  <span>Using rem values</span>
</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

Landing page

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