Spacing

Margin, padding, gap and space-between in Tailwind — the single spacing scale that drives them, and which tool to reach for when.

Spacing in Tailwind comes from one scale. Learn it once and it applies to padding, margin, gap, width, height and inset alike.

The scale#

--spacing defaults to 0.25rem, and every numeric spacing utility is a multiple of it.

v4 generates these dynamically, so any multiple works: p-13, p-72, mt-96 are all valid without configuration.

@theme {
  --spacing: 0.2rem;
}

Padding#

<div class="space-y-2 p-4 text-xs">
  <div class="inline-block bg-indigo-100"><div class="bg-white p-2 text-indigo-900">p-2</div></div>
  <div class="inline-block bg-indigo-100"><div class="bg-white px-6 py-2 text-indigo-900">px-6 py-2</div></div>
</div>

Margin#

Negative margins#

Useful for overlap and for cancelling a parent's padding:

<div class="p-6">
  <img class="-mx-6 w-[calc(100%+3rem)]" src="…" alt="">
</div>

Margin collapsing#

Vertical margins between siblings collapse to the larger of the two — mb-4 next to mt-8 yields 32px, not 48px. This surprises people constantly. gap does not collapse, which is one more reason to prefer it.

Gap#

gap is the modern default for spacing children. It requires a flex or grid container.

<div class="flex flex-wrap gap-3 p-4 text-sm">
  <span class="rounded bg-indigo-600 px-3 py-1.5 text-white">One</span>
  <span class="rounded bg-indigo-600 px-3 py-1.5 text-white">Two</span>
  <span class="rounded bg-indigo-600 px-3 py-1.5 text-white">Three</span>
  <span class="rounded bg-indigo-600 px-3 py-1.5 text-white">Four</span>
</div>

space-x-* and space-y-*#

These add margin to every child except the last, for cases where you cannot use flex or grid.

<div class="space-y-4">
  <p>First</p>
  <p>Second</p>
</div>

The same change applies to divide-x-* and divide-y-*.

Which spacing tool?#

Common patterns#

Consistent vertical rhythm#

<article class="space-y-6">
  <h2 class="text-2xl font-semibold">Heading</h2>
  <p>Paragraph.</p>
  <p>Another paragraph.</p>
</article>

Section padding that scales#

<section class="px-6 py-12 sm:py-16 lg:px-8 lg:py-24">…</section>

Divided list#

<ul class="mx-auto max-w-sm divide-y divide-gray-200 rounded-lg border border-gray-200 text-sm">
  <li class="px-4 py-3 text-gray-700">Inbox</li>
  <li class="px-4 py-3 text-gray-700">Drafts</li>
  <li class="px-4 py-3 text-gray-700">Sent</li>
</ul>

divide-y draws borders between children without a trailing line on the last one.

Form field stack#

<form class="flex flex-col gap-5">
  <label class="flex flex-col gap-1.5">…</label>
  <label class="flex flex-col gap-1.5">…</label>
</form>

Common mistakes#

• gap without flex or grid. It does nothing on a block element.
• Fighting margin collapse. Switch to gap or add flow-root to the parent.
• Mixing space-y-* and gap. Pick one per container.
• Using arbitrary values for common spacing. p-[18px] breaks the rhythm; p-4 or p-5 almost always reads better.
• Padding on an inline element expecting vertical space. Horizontal padding applies; vertical padding overlaps neighbouring lines. Use inline-block.

Related topics#

• Sizing — widths and heights from the same scale
• Flexbox and Grid — where gap lives
• Theme & Design Tokens — customising --spacing