Spacing and Sizing
Padding and Margin
Spacing in Tailwind uses a consistent numeric scale where each step is 0.25rem (4px). Padding adds space inside an element; margin adds space outside it.
Directions and the scale
Suffix a side to target it: p-4 (all sides), px-4 (left+right), py-2 (top+bottom), pt-4 (top only). Margin works the same with m-, mx-, my-, mt- etc. The number is the scale step.
| Class | Value |
|---|---|
| p-1 | 4px |
| p-2 | 8px |
| p-4 | 16px |
| p-6 | 24px |
| p-8 | 32px |
Example
<div class="bg-slate-100 p-4 rounded-lg">
<div class="bg-sky-500 text-white p-6 rounded mb-4">Padding 6, margin-bottom 4</div>
<div class="bg-sky-500 text-white p-2 rounded">Padding 2</div>
</div>Spacing children with space-*
space-y-4 adds vertical space between child elements automatically — no need to put margins on each child.
Example
<div class="space-y-3">
<div class="bg-white p-3 rounded shadow">One</div>
<div class="bg-white p-3 rounded shadow">Two</div>
<div class="bg-white p-3 rounded shadow">Three</div>
</div>💡
mx-auto centers a block element horizontally when it has a fixed or max width — the classic centering trick.