iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Spacing (p, m)

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Tailwind’s spacing utilities cover padding, margin, gap, and space-between. The scale is consistent (0, 0.5, 1, 1.5, 2, ... = 0, 2px, 4px, 6px, 8px, ...) so rhythm comes for free.

p / m / gap / space-x / space-y

EXAMPLE
<!-- 1) Padding -->
<div class="p-4">all sides 1rem</div>
<div class="px-4 py-2">x = horizontal, y = vertical</div>
<div class="pt-2 pr-3 pb-2 pl-3">each side</div>
<div class="ps-4 pe-4">logical (start / end) — RTL-aware</div>

<!-- 2) Margin (same prefixes, m instead of p) -->
<div class="m-4">all sides</div>
<div class="mx-auto w-64">horizontal auto = centred</div>
<div class="-mt-2">negative — slides up</div>
<div class="my-6">vertical rhythm</div>

<!-- 3) Space-between — children get gaps -->
<div class="flex space-x-3">
    <button>A</button>
    <button>B</button>
    <button>C</button>
</div>

<div class="space-y-2">
    <p>One</p>
    <p>Two</p>
    <p>Three</p>
</div>

<!-- 4) gap — preferred for flex/grid (modern + cleaner than space-x) -->
<div class="flex gap-3">
    <button>A</button>
    <button>B</button>
</div>
<div class="grid grid-cols-3 gap-4">…</div>
<div class="flex gap-x-4 gap-y-2">…</div>

<!-- 5) Responsive spacing -->
<section class="py-8 md:py-16 lg:py-24">
    <div class="px-4 md:px-8 lg:px-12">…</div>
</section>

<!-- 6) Arbitrary values when the scale doesn't fit -->
<div class="mt-[37px]">…</div>
<div class="p-[clamp(1rem,5vw,2rem)]">fluid padding</div>

<!-- 7) Scale (default; tweakable in tailwind.config) -->
<!--  0     0px     8    32px -->
<!--  px    1px     10   40px -->
<!--  0.5   2px     12   48px -->
<!--  1     4px     16   64px -->
<!--  2     8px     20   80px -->
<!--  3    12px     24   96px -->
<!--  4    16px     32  128px -->
<!--  5    20px     40  160px -->
<!--  6    24px     48  192px -->
<!--  7    28px     56  224px -->

<!-- 8) Common patterns -->

<!-- Page container with rhythm -->
<div class="max-w-5xl mx-auto px-4 md:px-6 py-8 space-y-8">
    <Section />
    <Section />
    <Section />
</div>

<!-- Card with consistent inner spacing -->
<article class="p-6 space-y-3 rounded-xl bg-white shadow">
    <h2 class="text-xl font-semibold">Title</h2>
    <p>Body…</p>
    <button class="mt-2">Action</button>
</article>

<!-- Button row -->
<div class="flex gap-2 mt-4">
    <button>Cancel</button>
    <button>Save</button>
</div>

<!-- 9) Negative margins to pull things into bleed-out areas -->
<header class="-mx-4 px-4 bg-slate-900 text-white">
    Edge-to-edge header inside a padded container
</header>

Why it matters

Prefer gap on flex/grid containers over space-x on individual children. Cleaner intent, no “first-child no margin” CSS dance, and the parent owns the spacing system.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<div class="p-4 m-2 mt-8 px-6 py-3 space-y-4">…</div>
Try it Yourself »

Discussion

Loading…