Tailwind CSS - Spacing

The Definitive Guide to Spacing in Tailwind CSS

Spacing is the foundation of any good layout. Tailwind CSS provides a robust and consistent system for managing space through three core concepts: Padding, Margin, and Space Between. Mastering these utilities is key to building clean, professional interfaces.

1. Padding: The Inner Space

Padding utilities (p-*) create space inside an element’s border. This is perfect for giving content room to breathe away from the edges of its container.

• p-{size}: Applies padding to all four sides.
• px-{size}: Applies padding to the left and right (x-axis).
• py-{size}: Applies padding to the top and bottom (y-axis).
• pt-{size}, pr-{size}, pb-{size}, pl-{size}: Apply padding to a single side (top, right, bottom, left).

<!-- This button has vertical padding and more horizontal padding -->
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  A Padded Button
</button>

2. Margin: The Outer Space

Margin utilities (m-*) create space outside an element’s border, pushing other elements away. They use the same syntax as padding (mx, my, mt, etc.). A unique feature is the ability to use negative margins to pull elements or create overlaps.

<!-- The second avatar overlaps the first using a negative margin -->
<div class="flex">
  <img class="w-16 h-16 rounded-full border-2 border-white" src="..." alt="">
  <img class="-ml-4 w-16 h-16 rounded-full border-2 border-white" src="..." alt="">
</div>

3. Space Between: The Modern Approach to Item Gaps

Space Between utilities (space-x-* and space-y-*) are a modern and often superior way to add gaps between child elements in a flex, grid, or flow-root container. Instead of adding a margin to every child, you add a single space-* utility to the parent.

Why is this better? It automatically handles adding space between items without adding it to the first or last item, eliminating the need for complex selectors like ... > :not(:last-child).

<!-- Add a 1rem horizontal gap between all children -->
<div class="flex space-x-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Choosing the Right Spacing Tool

Use this mental model to decide which utility to use:

Goal	Utility to Use	Reasoning
Add space inside a box, between content and its border.	Padding	It’s for internal breathing room.
Push an entire element away from another element.	Margin	It’s for creating space around the outside.
Add uniform gaps between a list or group of items.	Space Between	It’s the cleanest and most maintainable method for item distribution.

Comprehensive Example

This example combines all three concepts to build a simple card layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Spacing Example</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-100">

  <!-- 1. MARGIN: The `my-10` and `mx-auto` utilities position the entire container -->
  <div class="max-w-md mx-auto my-10 bg-white rounded-xl shadow-md overflow-hidden">

    <!-- 2. PADDING: The `p-8` utility gives the content inside the card breathing room -->
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-slate-500">Getting a new business off the ground is a lot of hard work.</p>

      <!-- 3. SPACE BETWEEN: The `space-x-4` on the parent cleanly separates the buttons -->
      <div class="mt-6 flex space-x-4">
        <button class="px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600">Read More</button>
        <button class="px-4 py-2 bg-slate-200 text-slate-800 rounded hover:bg-slate-300">Share</button>
      </div>
    </div>

  </div>

</body>
</html>

Customizing Your Spacing Scale

Your design system may require specific spacing values. You can easily configure the entire spacing scale, or extend it with new values, in your tailwind.config.js file under the theme.spacing or theme.extend.spacing key.