Skip to main content

Spacing

In this chapter, you learn Tailwind CSS's spacing system (margin, padding, gap).

The spacing scale​

Tailwind CSS uses a 4px-based scale.

ClassSize
00px
px1px
0.52px (0.125rem)
14px (0.25rem)
28px (0.5rem)
312px (0.75rem)
416px (1rem)
520px (1.25rem)
624px (1.5rem)
832px (2rem)
1040px (2.5rem)
1248px (3rem)
1664px (4rem)
2080px (5rem)
2496px (6rem)

Padding (padding)​

All sides​

<div class="p-4">16px padding</div>
<div class="p-8">32px padding</div>

Horizontal and vertical​

<div class="px-4">16px horizontal</div>
<div class="py-4">16px vertical</div>

Individual sides​

ClassSide
pt-*Top
pr-*Right
pb-*Bottom
pl-*Left
<div class="pt-4 pr-6 pb-4 pl-6">
  16px vertical, 24px horizontal
</div>

Logical properties​

Logical properties that also work with RTL (right-to-left) languages.

ClassMeaning
ps-*Start side (LTR: left, RTL: right)
pe-*End side (LTR: right, RTL: left)
<div class="ps-4 pe-6">Logical properties</div>

Margin (margin)​

Basic usage​

<div class="m-4">16px all sides</div>
<div class="mx-4">16px horizontal</div>
<div class="my-4">16px vertical</div>
<div class="mt-4">16px top</div>

Negative margins​

You can also specify negative values.

<div class="-mt-4">-16px top</div>
<div class="-mx-2">-8px horizontal</div>

Negative margins are handy for "full-bleed" layouts that extend beyond the container.

<!-- Stretch an image inside the container to the full container width -->
<div class="px-4">
  <p>Normal content</p>
  <img src="..." class="-mx-4 w-[calc(100%+2rem)]" alt="Full-bleed image" />
  <p>Normal content</p>
</div>

Auto margins​

<!-- Horizontally centered -->
<div class="mx-auto w-64">Centered</div>

<!-- Right-aligned -->
<div class="ml-auto w-64">Right-aligned</div>

<!-- Used with flex -->
<div class="flex">
  <div>Left</div>
  <div class="ml-auto">Pushed to the right edge</div>
</div>

Space utilities​

Add even spacing between child elements.

space-x (horizontal)​

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

space-y (vertical)​

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

Reversed order​

<div class="flex flex-row-reverse space-x-4 space-x-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
When to use space-* vs gap

When to use space-* vs gap:

  • gap (recommended): specified on a Flexbox/Grid container. It handles wrapping and reordering of elements, and does not add extra margin to the first/last element
  • space-*: adds margin via the > :not(:last-child) selector (in v4, space-y is margin-bottom and space-x is margin-inline-end; v3 used the adjacent selector with margin-top/left). Handy for block elements outside Flex/Grid, but be careful when combining with flex-wrap or order

As a rule, use gap inside Flex/Grid layouts.

Gap​

Best for setting spacing in Flexbox/Grid.

<!-- Flexbox -->
<div class="flex gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Different for horizontal and vertical -->
<div class="grid grid-cols-3 gap-x-4 gap-y-8">
  ...
</div>

Arbitrary values​

In v4 you can specify numbers that are not in the scale table even without brackets (the value is --spacing × the number).

<!-- v4 -->
<div class="p-17">68px (17 × 0.25rem) padding</div>
<div class="m-100">400px (25rem) margin</div>

<!-- Brackets are also available -->
<div class="p-[17px]">17px</div>
<div class="p-[2.5rem]">2.5rem</div>

Practical examples​

Card component​

<div class="p-6 bg-white rounded-lg shadow-sm">
  <h2 class="mb-4 text-xl font-bold">Title</h2>
  <p class="mb-4 text-gray-600">
    Description goes here...
  </p>
  <button class="px-4 py-2 bg-blue-500 text-white rounded-sm">
    See details
  </button>
</div>

Section​

<section class="py-16 px-4">
  <div class="max-w-4xl mx-auto">
    <h2 class="mb-8 text-3xl font-bold text-center">
      Section title
    </h2>
    <div class="space-y-6">
      <p>Paragraph 1...</p>
      <p>Paragraph 2...</p>
      <p>Paragraph 3...</p>
    </div>
  </div>
</section>

Form​

<form class="space-y-4 p-6 bg-white rounded-lg shadow-sm">
  <div>
    <label class="block mb-1 text-sm font-medium">Name</label>
    <input class="w-full px-3 py-2 border border-gray-300 rounded-sm" />
  </div>
  <div>
    <label class="block mb-1 text-sm font-medium">Email</label>
    <input class="w-full px-3 py-2 border border-gray-300 rounded-sm" />
  </div>
  <button class="w-full py-2 mt-4 bg-blue-500 text-white rounded-sm">
    Submit
  </button>
</form>

Button group​

<div class="flex gap-2">
  <button class="px-4 py-2 bg-blue-500 text-white rounded-sm">
    Save
  </button>
  <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-sm">
    Cancel
  </button>
</div>

Design principles for spacing​

1. Use a consistent scale​

<!-- Good: values that follow the scale -->
<div class="p-4 mb-6">...</div>

<!-- Avoid: overusing arbitrary values -->
<div class="p-[17px] mb-[23px]">...</div>

2. A logical hierarchy​

<!-- Section > Card > Element -->
<section class="py-16">
  <div class="p-6">
    <h2 class="mb-4">Title</h2>
    <p class="mb-2">Body</p>
  </div>
</section>

3. Responsive support​

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

Summary​

  • A 4px-based scale (p-4 = 16px)
  • p-* for padding, m-* for margin
  • px-* / py-* for horizontal and vertical
  • space-* for spacing between child elements
  • gap is recommended for Flex/Grid
  • mx-auto for horizontal centering