Tailwind Box Model and Spacing

Every HTML element is a rectangular box. The box model describes the layers that make up that box: content, padding, border, and margin. Tailwind gives you precise utility classes to control each layer.

The Box Model — Visualized

┌─────────────────────────────────────┐
│            MARGIN (m-)              │
│  ┌───────────────────────────────┐  │
│  │         BORDER (border-)      │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │      PADDING (p-)       │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     CONTENT       │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

• Margin — Space outside the element, pushing other elements away.
• Border — The visible line around the element.
• Padding — Space inside the element, between the border and the content.
• Content — Your actual text, image, or child elements.

Padding Classes

Padding pushes content inward from the edges. Tailwind uses a spacing scale where each step equals 0.25rem (4px by default).

Class     CSS Output          Visual effect
───────────────────────────────────────────
p-0       padding: 0          No padding
p-1       padding: 0.25rem    Tiny padding
p-2       padding: 0.5rem     Small padding
p-4       padding: 1rem       Medium padding
p-8       padding: 2rem       Large padding
p-16      padding: 4rem       Extra-large padding

Directional padding:
pt-4  →  padding-top: 1rem
pb-4  →  padding-bottom: 1rem
pl-4  →  padding-left: 1rem
pr-4  →  padding-right: 1rem
px-4  →  padding-left + padding-right: 1rem
py-4  →  padding-top + padding-bottom: 1rem

Margin Classes

Margin works the same way as padding but controls space outside the element.

Class     CSS Output
─────────────────────
m-0       margin: 0
m-4       margin: 1rem
m-auto    margin: auto (centers block elements)

mt-4  →  margin-top: 1rem
mb-4  →  margin-bottom: 1rem
ml-4  →  margin-left: 1rem
mr-4  →  margin-right: 1rem
mx-4  →  margin-left + margin-right: 1rem
my-4  →  margin-top + margin-bottom: 1rem
mx-auto → centers a block element horizontally

Space Between Children

The space-x- and space-y- classes add margin between child elements automatically. You apply them to the parent, not each child.

<div class="flex space-x-4">
  <button>First</button>
  <button>Second</button>
  <button>Third</button>
</div>

Result: Each button gets 1rem (16px) gap from its neighbor.
No margin needed on individual buttons.

The Spacing Scale Chart

Tailwind Number → rem value → px value (at 16px base)
──────────────────────────────────────────────────────
0               → 0         → 0px
0.5             → 0.125rem  → 2px
1               → 0.25rem   → 4px
2               → 0.5rem    → 8px
3               → 0.75rem   → 12px
4               → 1rem      → 16px
5               → 1.25rem   → 20px
6               → 1.5rem    → 24px
8               → 2rem      → 32px
10              → 2.5rem    → 40px
12              → 3rem      → 48px
16              → 4rem      → 64px
20              → 5rem      → 80px
24              → 6rem      → 96px

Practical Example — Profile Card Spacing

<div class="p-6 m-4 border rounded-lg">
  <img class="mb-4" src="avatar.jpg" alt="Profile">
  <h2 class="mb-1 font-bold">Jane Smith</h2>
  <p class="text-gray-500">Web Developer</p>
</div>

Breakdown:
p-6    → 24px padding inside the card
m-4    → 16px margin outside the card
mb-4   → 16px space below the image
mb-1   → 4px space below the name