Tailwind CSS Margin & Padding Cheatsheet

Complete Tailwind v4 spacing reference with visual examples.
Click any class to copy to clipboard.

Spacing Scale Reference

This scale applies to all spacing utilities: padding (p-*), margin (m-*), gap-*, and space-*.

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

Padding Utilities

Replace {size} with any value from the spacing scale above (0, px, 0.5, 1, 2, 4, 8, etc.)

Class	CSS
`p-{size}`	`padding: {value};`
`px-{size}`	`padding-left: {value}; padding-right: {value};`
`py-{size}`	`padding-top: {value}; padding-bottom: {value};`
`pt-{size}`	`padding-top: {value};`
`pr-{size}`	`padding-right: {value};`
`pb-{size}`	`padding-bottom: {value};`
`pl-{size}`	`padding-left: {value};`
`ps-{size}`	`padding-inline-start: {value};`
`pe-{size}`	`padding-inline-end: {value};`

Padding - Visual Examples

p-4 (all sides)

Content

px-6 (horizontal)

Content

py-6 (vertical)

Content

pt-8 (top only)

Content

pr-8 (right only)

Content

pb-8 (bottom only)

Content

Margin Utilities

Includes auto values for centering and positioning

Class	CSS
`m-{size}`	`margin: {value};`
`mx-{size}`	`margin-left: {value}; margin-right: {value};`
`my-{size}`	`margin-top: {value}; margin-bottom: {value};`
`mt-{size}`	`margin-top: {value};`
`mr-{size}`	`margin-right: {value};`
`mb-{size}`	`margin-bottom: {value};`
`ml-{size}`	`margin-left: {value};`
`ms-{size}`	`margin-inline-start: {value};`
`me-{size}`	`margin-inline-end: {value};`
`m-auto`	`margin: auto;`
`mx-auto`	`margin-left: auto; margin-right: auto;`
`my-auto`	`margin-top: auto; margin-bottom: auto;`
`mt-auto`	`margin-top: auto;`
`mr-auto`	`margin-right: auto;`
`mb-auto`	`margin-bottom: auto;`
`ml-auto`	`margin-left: auto;`

Margin - Visual Examples

m-4 (all sides)

Content

mx-auto (center horizontally)

Centered

mt-8 (top margin)

Content

ml-auto (push right)

Pushed Right

Negative Margin Utilities

Prefix with - to use negative values

Class	CSS
`-m-{size}`	`margin: -{value};`
`-mx-{size}`	`margin-left: -{value}; margin-right: -{value};`
`-my-{size}`	`margin-top: -{value}; margin-bottom: -{value};`
`-mt-{size}`	`margin-top: -{value};`
`-mr-{size}`	`margin-right: -{value};`
`-mb-{size}`	`margin-bottom: -{value};`
`-ml-{size}`	`margin-left: -{value};`

Negative Margin - Visual Example

Negative margins pull elements outside their container or overlap with siblings.

-mt-6 -ml-6

Item 1

Item 2 (-ml-8)

Item 3

Space Between Utilities

Add space between child elements using the adjacent sibling combinator

Class	CSS
`space-x-{size}`	`& > * + * { margin-left: {value}; }`
`space-y-{size}`	`& > * + * { margin-top: {value}; }`
`space-x-reverse`	`& > * + * { --tw-space-x-reverse: 1; }`
`space-y-reverse`	`& > * + * { --tw-space-y-reverse: 1; }`

Space Between - Visual Examples

Adds margin between child elements without affecting the first or last child.

space-x-4 (horizontal)

space-y-4 (vertical)

space-x-8 (larger gap)

space-x-reverse (RTL)

Gap Utilities

Works with flexbox and grid layouts. Preferred over space-* for most use cases.

Class	CSS
`gap-{size}`	`gap: {value};`
`gap-x-{size}`	`column-gap: {value};`
`gap-y-{size}`	`row-gap: {value};`

Gap - Visual Examples

Gap utilities work with flex and grid layouts. Preferred over space-* for most cases.

Flexbox with gap-4

Grid with gap-4

Grid with gap-x-8 gap-y-2 (different axes)

Logical Properties (ps-, pe-, ms-, me-)

Logical properties adapt to text direction (LTR/RTL). Use these for internationalization.

ps-8 (padding-inline-start) - LTR

Content (LTR)

ps-8 (padding-inline-start) - RTL

Content (RTL)

ms-auto (margin-inline-start: auto) - LTR

Pushed End

ms-auto (margin-inline-start: auto) - RTL

Pushed End

Common Patterns

Centered Container

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

Card with Consistent Padding

<div class="p-6 lg:p-8">
  <!-- Responsive padding -->
</div>

Vertical Stack

<div class="flex flex-col gap-4">
  <Card />
  <Card />
  <Card />
</div>

Section Spacing

<section class="py-16 lg:py-24">
  <!-- Responsive vertical spacing -->
</section>

Button with Padding

<button class="px-4 py-2">
  Click me
</button>

Push Footer to Bottom

<main class="flex-1">
  <!-- Content -->
</main>
<footer class="mt-auto">
  <!-- Footer sticks to bottom -->
</footer>

About Tailwind Spacing

Tailwind uses a consistent spacing scale based on 0.25rem (4px) increments. This creates visual harmony across your design.

Gap vs Space: Prefer gap-* for flexbox and grid layouts as it doesn't affect the first/last child and works in both directions.

For responsive layouts, prefix any class with a breakpoint: md:p-8, lg:gap-6

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 →

Tailwind CSS Margin & Padding Cheatsheet

Spacing Scale Reference

Padding Utilities

Padding - Visual Examples

Margin Utilities

Margin - Visual Examples

Negative Margin Utilities

Negative Margin - Visual Example

Space Between Utilities

Space Between - Visual Examples

Gap Utilities

Gap - Visual Examples

Logical Properties (ps-*, pe-*, ms-*, me-*)

Common Patterns

Centered Container

Card with Consistent Padding

Vertical Stack

Section Spacing

Button with Padding

Push Footer to Bottom

About Tailwind Spacing

See Tailwind spacing on any website

Explore more Tailwind tools

Tailwind Grid Generator

Tailwind Flexbox Generator

Tailwind Gradient Generator

Tailwind Text Gradient

Tailwind Gradients Collection

Tailwind Colors

Tailwind Box Shadow Generator

Tailwind Text Shadow

Tailwind Filter Generator

Tailwind Transform Generator

Tailwind Animation Generator

Tailwind Transition Generator

Tailwind Config Generator

Tailwind Input Generator

Tailwind Class Sorter

Flexbox Cheatsheet

Overflow Cheatsheet

Logical Properties (ps-, pe-, ms-, me-)