Skip to content
Tailwind CSS

Spacing

Apply padding, margin, gap, and width/height from one scale.

#spacing#padding#margin

Code

tailwind
<!-- Padding: p, pt, pr, pb, pl, px, py -->
<div class="p-4 px-6 py-2">Padding all, x, y</div>

<!-- Margin: m, mt, mr, mb, ml, mx, my -->
<div class="mt-8 mx-auto mb-4">Centered horizontally</div>

<!-- Space between children -->
<div class="space-y-4">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<!-- Gap for flex/grid -->
<div class="flex gap-4">
  <div>X</div>
  <div>Y</div>
</div>

<!-- Width and height scales -->
<div class="w-full h-screen max-w-3xl">Full, screen, capped</div>