Space Between Children
Add even gaps between children with space-x and space-y.
Syntax
class="space-y-4" / class="flex space-x-4"The space-x-* and space-y-* utilities add margin between child elements, without a margin on the outer edges.
They are handy for stacks and rows when you are not using flex gap.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer spaces out a vertical list of form fields using space-y-4 without adding margin to each individual field component.
- A horizontal tab bar is given consistent gaps between tab items using space-x-2 on the container.
- A button group in a toolbar uses space-x-1 to keep related actions visually tight but distinct.
More examples
Vertical form field spacing
space-y-4 adds a top margin to every child except the first, creating uniform vertical spacing between form elements without editing each child.
<form class="space-y-4 max-w-sm">
<input class="w-full border border-gray-300 rounded px-3 py-2" placeholder="Name">
<input class="w-full border border-gray-300 rounded px-3 py-2" placeholder="Email">
<button class="w-full bg-blue-600 text-white py-2 rounded">Submit</button>
</form>Horizontal nav items
space-x-6 inserts a left margin on each child after the first, evenly spacing horizontal navigation links without using gap or padding.
<nav class="flex space-x-6">
<a href="/" class="text-gray-700 hover:text-blue-600">Home</a>
<a href="/about" class="text-gray-700 hover:text-blue-600">About</a>
<a href="/contact" class="text-gray-700 hover:text-blue-600">Contact</a>
</nav>Card list with space-y
space-y-3 separates stacked list cards uniformly, avoiding the need to add mb- or mt- utilities to each individual list item.
<ul class="space-y-3">
<li class="bg-white border rounded p-4">Task one</li>
<li class="bg-white border rounded p-4">Task two</li>
<li class="bg-white border rounded p-4">Task three</li>
</ul>
Discussion