Tailwind CSS Spacing Utilities

Complete reference for Tailwind CSS v4.1 spacing utilities: margin, padding, and space-between.

Quick Reference

Margin Classes

• m-{size}: All sides margin

• mx-{size}: Horizontal (left + right)

• my-{size}: Vertical (top + bottom)

• mt-{size}: Top margin

• mr-{size}: Right margin

• mb-{size}: Bottom margin

• ml-{size}: Left margin

• -m-{size}: Negative margin

• m-auto: Auto margin (centering)

Padding Classes

• p-{size}: All sides padding

• px-{size}: Horizontal (left + right)

• py-{size}: Vertical (top + bottom)

• pt-{size}: Top padding

• pr-{size}: Right padding

• pb-{size}: Bottom padding

• pl-{size}: Left padding

Space Between Children

• space-x-{size}: Horizontal spacing between flex/grid children

• space-y-{size}: Vertical spacing between flex/grid children

Spacing Scale

Tailwind CSS v4.1 uses a configurable spacing scale where --spacing is the base unit (default: 0.25rem/4px).

Class Value

0 0

px 1px

0.5 calc(var(--spacing) * 2) = 0.5rem

1 calc(var(--spacing) * 4) = 1rem

2 calc(var(--spacing) * 8) = 2rem

3 calc(var(--spacing) * 12) = 3rem

4 calc(var(--spacing) * 16) = 4rem

6 calc(var(--spacing) * 24) = 6rem

8 calc(var(--spacing) * 32) = 8rem

12 calc(var(--spacing) * 48) = 12rem

16 calc(var(--spacing) * 64) = 16rem

Common Patterns

Centered Container

<div class="mx-auto">Centered content</div>

Card with Padding

<div class="p-6 bg-white rounded-lg shadow">Card content</div>

Flex Items with Spacing

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

Stack with Vertical Spacing

<div class="space-y-4"> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> </div>

See detailed references:

• Margin utilities →

• Padding utilities →