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

Render Flow - Space between children (space-x, space-y)

Read container element

↓

Apply Tailwind class space-x-4

↓

Calculate horizontal margin between children

↓

Add margin-left to all but first child

↓

Render children with horizontal gaps

↓

Paint and composite final layout

The browser reads the container with Tailwind's space-x or space-y class, calculates margins between children, applies them except on the first child, then renders the children spaced horizontally or vertically.

Render Steps - 3 Steps

Code Added:<div class="flex"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>

Before

[ ]

(Empty page, no boxes visible)

→

After

[1][2][3]

Boxes appear side by side with no space

Adding flex container arranges children horizontally with no gaps by default.

🔧 Browser Action:Creates flex formatting context, lays out children in a row

Code Sample

A horizontal row of three boxes spaced evenly with 1rem gap between them using Tailwind's space-x-4.

Tailwind

<div class="flex space-x-4">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Tailwind

.flex {
  display: flex;
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.box {
  padding: 1rem;
  background-color: #a0aec0;
  color: white;
  border-radius: 0.25rem;
  text-align: center;
}

Render Quiz - 3 Questions

After applying space-x-4 (render_step 2), what do you see?

A Boxes arranged horizontally with equal gaps between them

B Boxes stacked vertically with gaps

C Boxes touching with no gaps

D Boxes arranged randomly

Common Confusions - 2 Topics

Why is there no space after the last child?

Tailwind's space-x and space-y add margin only between children, not after the last one, to avoid extra space at container edges (see render_step 2).

💡 Margins appear only between siblings, never after the last child.

Why doesn't space-x work if I don't use flex?

space-x relies on flex or inline-flex to arrange children horizontally; without flex, children stack vertically and margin-left creates uneven spacing (render_step 1).

💡 Use flex container to make space-x create horizontal gaps.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
space-x-4	margin-left: 1rem on children except first	Horizontal (row)	Adds horizontal gaps between flex children	Spacing items in a row
space-y-4	margin-top: 1rem on children except first	Vertical (column)	Adds vertical gaps between stacked children	Spacing items in a column
flex	display: flex	Horizontal by default	Arranges children in a row or column	Layout container for flexible items

Concept Snapshot

space-x and space-y add horizontal or vertical gaps between sibling elements. They work by adding margin-left or margin-top to all children except the first. Requires a flex or inline-flex container for horizontal spacing. No extra margin after the last child to keep container edges clean. Common values like space-x-4 add 1rem gaps. Use space-y for vertical stacking gaps.