Spacing: Padding, Margin & Gap

Good spacing is the difference between a page that feels cramped and one that feels calm and easy to read. Tailwind gives you one spacing scale that you use for padding, margin, gap and many other utilities, so every space on the page fits the same rhythm.

In this lesson you will learn the spacing scale, add padding and margin on any side, centre blocks with auto margins, space out groups with gap, and use the start and end utilities that work in both left-to-right and right-to-left languages.

The spacing scale

Spacing utilities take a number. Tailwind multiplies that number by the --spacing theme variable, which is 0.25rem (4px) by default.

Any whole number works, so p-13 or mt-30 are valid. Quarter steps work too: p-2.5 is 0.625rem and mt-0.5 is 2px. In practice, most designs use a handful of values such as 1, 2, 3, 4, 6, 8, 12 and 16, and that limited set is what makes the page look consistent.

Padding

Padding is the space inside an element, between its border and its content. The class names are built from p plus an optional side:

Classes combine, and a more specific side does not cancel the others. p-4 pt-8 gives 1rem padding everywhere except the top, which gets 2rem.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Padding</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.3"></script>
</head>
<body class="flex flex-wrap items-start gap-4 bg-slate-100 p-6">
  <div class="bg-sky-200"><p class="bg-white">No padding</p></div>
  <div class="bg-sky-200 p-4"><p class="bg-white">p-4</p></div>
  <div class="bg-sky-200 px-8 py-2"><p class="bg-white">px-8 py-2</p></div>
  <div class="bg-sky-200 p-4 pt-10"><p class="bg-white">p-4 pt-10</p></div>
</body>
</html>

The blue area around each white label is the padding. Buttons usually look best with more horizontal than vertical padding, such as px-4 py-2.

Margin

Margin is the space outside an element, pushing its neighbours away. It uses the same pattern with m: m-4, mx-4, my-4, mt-4, mb-4, ms-4 and so on. Two extra tricks make margin special.

Auto margins. mx-auto sets the left and right margins to auto, which centres a block that has a width or maximum width. This is the classic way to centre a page's content column:

<main class="mx-auto max-w-3xl px-4">
  ...page content...
</main>

Negative margins. Put a minus sign before the class to pull an element the other way: -mt-4 moves an element up by 1rem. Use this sparingly, for example to let an image overlap the card above it.

Gap: space between items

When you place items in a row or column with Flexbox or Grid, do not add margin to each item. Put gap-* on the parent instead. Gap adds space between items only, never at the outer edges, and it works when items wrap onto new lines.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gap</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.3"></script>
</head>
<body class="p-6">
  <h2 class="mb-3 font-semibold">Trains from Rohtak today</h2>
  <div class="flex max-w-sm flex-wrap gap-x-3 gap-y-2">
    <span class="rounded-full bg-sky-100 px-3 py-1 text-sky-800">06:10 Delhi</span>
    <span class="rounded-full bg-sky-100 px-3 py-1 text-sky-800">07:45 Bhiwani</span>
    <span class="rounded-full bg-sky-100 px-3 py-1 text-sky-800">09:20 Jind</span>
    <span class="rounded-full bg-sky-100 px-3 py-1 text-sky-800">11:05 Rewari</span>
    <span class="rounded-full bg-sky-100 px-3 py-1 text-sky-800">13:30 Panipat</span>
  </div>
</body>
</html>

gap-x-3 sets the space between items on the same line and gap-y-2 the space between lines. Use plain gap-4 when both should be equal. You will use gap constantly in Flexbox Utilities and Grid Utilities.

Start and end: spacing for every language

ps-* and pe-* (and ms-*, me-*) use logical properties: start means the side where text begins. In English that is the left, but in Urdu or Arabic, which are written right to left, it is the right. If you use ms-2 for the space between an icon and its label, the layout flips correctly when the page has dir="rtl".

<!-- Works in both directions -->
<button class="flex items-center rounded-md bg-sky-600 px-4 py-2 text-white">
  <span aria-hidden="true">↓</span>
  <span class="ms-2">Download admit card</span>
</button>

Tailwind 4.2 added block-direction versions too, such as pbs-* (padding block start) and mbe-* (margin block end). In normal horizontal text, block start is the top and block end is the bottom. See Logical Properties for the CSS behind them.

Advanced: pushing content with auto margins

An auto margin inside a flex container takes all the spare space. This is a neat way to stick a button to the bottom of cards that have different amounts of text, or to push one link to the far end of a navigation bar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Auto margins</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.3"></script>
</head>
<body class="bg-slate-100 p-6">
  <nav class="mb-6 flex gap-4 rounded-lg bg-white px-4 py-3">
    <a href="#">Home</a>
    <a href="#">Courses</a>
    <a href="#" class="ms-auto font-semibold text-sky-700">Log in</a>
  </nav>
  <div class="flex gap-4">
    <article class="flex w-48 flex-col rounded-lg bg-white p-4">
      <h3 class="font-semibold">Tally basics</h3>
      <p class="mt-2 text-sm text-slate-600">Six weeks.</p>
      <a href="#" class="mt-auto pt-4 text-sky-700">Details</a>
    </article>
    <article class="flex w-48 flex-col rounded-lg bg-white p-4">
      <h3 class="font-semibold">Spoken English</h3>
      <p class="mt-2 text-sm text-slate-600">Evening batch for working people, with weekend practice sessions.</p>
      <a href="#" class="mt-auto pt-4 text-sky-700">Details</a>
    </article>
  </div>
</body>
</html>

ms-auto on the last link takes all the free space before it, so "Log in" moves to the right end. In each card, mt-auto takes the free space above the "Details" link, so both links line up at the bottom even though the descriptions have different lengths.

Common mistakes

• Margins on every item in a list. mb-4 on each card leaves an unwanted gap after the last one. Use gap-4 on the parent.
• mx-auto with no width. A block element is already full width, so there is nothing to centre. Add max-w-* or w-*.
• Inventing pixel values. p-[13px] everywhere breaks the rhythm of the page. Pick the nearest scale step.
• Forgetting that padding is inside. Padding adds space inside the background and border; margin adds space outside. Use padding for the inside of buttons and cards.

Key points

• Spacing utilities multiply --spacing (0.25rem) by the number: p-4 is 1rem, m-8 is 2rem.
• Add a side with x, y, t, r, b, l, or the logical s and e: px-4, mt-2, ms-auto.
• mx-auto centres a block that has a width or maximum width; a leading minus gives a negative margin.
• Use gap, gap-x and gap-y on flex and grid parents instead of margins on children.
• Start and end utilities (ps-*, me-*) flip correctly in right-to-left languages.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Notice board</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.3"></script>
</head>
<body class="bg-slate-100 p-6">
  <section class="mx-auto max-w-md rounded-xl bg-white p-6">
    <h2 class="mb-4 text-lg font-semibold">Notice board</h2>
    <div class="flex flex-col gap-3">
      <p class="rounded-md bg-amber-50 px-4 py-2">Sports day on Saturday.</p>
      <p class="rounded-md bg-amber-50 px-4 py-2">Library closed on Monday.</p>
      <p class="rounded-md bg-amber-50 px-4 py-2">Fee receipts at the office.</p>
    </div>
  </section>
</body>
</html>