Tailwind CSS Spacing Cheatsheet

Complete reference for all Tailwind spacing utilities.
Click any class to copy to clipboard.

Spacing Utility Summary

Padding

p-* - All sides

px-* - Horizontal

py-* - Vertical

pt-* pr-* pb-* pl-*

Margin

m-* - All sides

mx-* - Horizontal

my-* - Vertical

mt-* mr-* mb-* ml-*

Gap

gap-* - All

gap-x-* - Column

gap-y-* - Row

For flex/grid layouts

Space Between

space-x-* - Horizontal

space-y-* - Vertical

Between child elements

Quick Reference - Spacing Scale

All spacing values used across padding, margin, gap, and space utilities.

Value	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

Padding Utilities

Control the padding on all sides or individual sides of an element.

p-*

(All sides) - padding

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

px-*

(Horizontal) - padding-left & padding-right

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

py-*

(Vertical) - padding-top & padding-bottom

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

pt-*

(Top) - padding-top

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

pr-*

(Right) - padding-right

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

pb-*

(Bottom) - padding-bottom

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

pl-*

(Left) - padding-left

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

Margin Utilities

Control the margin on all sides or individual sides of an element. Use negative values with -m-* prefix.

m-*

(All sides) - margin

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

mx-*

(Horizontal) - margin-left & margin-right

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

my-*

(Vertical) - margin-top & margin-bottom

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

mt-*

(Top) - margin-top

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

mr-*

(Right) - margin-right

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

mb-*

(Bottom) - margin-bottom

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

ml-*

(Left) - margin-left

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

Gap Utilities

Control the gap between items in flexbox and grid layouts.

gap-*

(All) - gap

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

gap-x-*

(Column) - column-gap

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

gap-y-*

(Row) - row-gap

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

Space Between Utilities

Add space between child elements using the adjacent sibling combinator.

space-x-*

(Horizontal) - & > * + * { margin-left }

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

space-y-*

(Vertical) - & > * + * { margin-top }

Class	Rem	Pixels
	`0rem`	0px
	`1px`	1px
	`0.125rem`	2px
	`0.25rem`	4px
	`0.375rem`	6px
	`0.5rem`	8px
	`0.625rem`	10px
	`0.75rem`	12px
	`0.875rem`	14px
	`1rem`	16px
	`1.25rem`	20px
	`1.5rem`	24px
	`1.75rem`	28px
	`2rem`	32px
	`2.25rem`	36px
	`2.5rem`	40px
	`2.75rem`	44px
	`3rem`	48px
	`3.5rem`	56px
	`4rem`	64px
	`5rem`	80px
	`6rem`	96px
	`7rem`	112px
	`8rem`	128px
	`9rem`	144px
	`10rem`	160px
	`11rem`	176px
	`12rem`	192px
	`13rem`	208px
	`14rem`	224px
	`15rem`	240px
	`16rem`	256px
	`18rem`	288px
	`20rem`	320px
	`24rem`	384px

Usage Examples

Card Padding

<div class="p-4 md:p-6 lg:p-8">
  <!-- 16px -> 24px -> 32px -->
</div>

Centered Container

<div class="mx-auto max-w-4xl px-4">
  <!-- Horizontally centered -->
</div>

Grid with Gap

<div class="grid grid-cols-3 gap-6">
  <!-- 24px gap between items -->
</div>

Vertical Stack

<div class="space-y-4">
  <!-- 16px between children -->
</div>

About Tailwind Spacing

Tailwind uses a consistent spacing scale based on 0.25rem (4px) increments by default.

Gap vs Space: Prefer gap-* for flexbox and grid layouts. Use space-* only when gap isn't available.

For arbitrary values, use bracket notation: p-[17px] or m-[2.5rem]

See Tailwind spacing on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect spacing, padding, margin, gaps, and more with just one click.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →