Margin, Padding & Borders

The Spacing Scale

Tailwind uses a consistent spacing scale based on multiples of 0.25rem (4px). Understanding this scale is essential because it powers margin, padding, gap, width, and height utilities.

Padding

Padding adds space inside an element, between its border and content.

<!-- All sides -->
<div class="p-4">1rem padding on all sides</div>

<!-- Horizontal (left + right) -->
<div class="px-6">1.5rem left and right padding</div>

<!-- Vertical (top + bottom) -->
<div class="py-8">2rem top and bottom padding</div>

<!-- Individual sides -->
<div class="pt-2">Top padding only</div>
<div class="pr-4">Right padding only</div>
<div class="pb-6">Bottom padding only</div>
<div class="pl-8">Left padding only</div>

Margin

Margin adds space outside an element. The syntax mirrors padding, replacing p with m:

<!-- All sides -->
<div class="m-4">1rem margin on all sides</div>

<!-- Horizontal -->
<div class="mx-auto">Auto horizontal margin (centering)</div>

<!-- Vertical -->
<div class="my-6">1.5rem top and bottom margin</div>

<!-- Individual sides -->
<div class="mt-4">Top margin</div>
<div class="mb-8">Bottom margin</div>

<!-- Negative margin -->
<div class="-mt-4">Negative top margin (-1rem)</div>

Auto Margin

mx-auto is one of the most commonly used classes. It horizontally centers a block element with a defined width:

<div class="max-w-4xl mx-auto px-4">
  This container is centered on the page.
</div>

Space Between

Instead of adding margin to every child, use space-x-* and space-y-* on the parent to add even spacing between children:

<div class="flex space-x-4">
  <div class="bg-blue-200 p-4">A</div>
  <div class="bg-blue-200 p-4">B</div>
  <div class="bg-blue-200 p-4">C</div>
</div>

<div class="space-y-6">
  <p>Paragraph one</p>
  <p>Paragraph two</p>
  <p>Paragraph three</p>
</div>

Borders

Border Width

<div class="border">Default 1px border</div>
<div class="border-2">2px border</div>
<div class="border-4">4px border</div>
<div class="border-8">8px border</div>

<!-- Individual sides -->
<div class="border-t-2">Top border only</div>
<div class="border-b">Bottom border only</div>
<div class="border-l-4">Left accent border</div>

Border Color

<div class="border-2 border-gray-300">Gray border</div>
<div class="border-2 border-red-500">Red border</div>
<div class="border-l-4 border-indigo-500">Indigo left accent</div>

Border Radius

<div class="rounded">Small radius (0.25rem)</div>
<div class="rounded-md">Medium radius (0.375rem)</div>
<div class="rounded-lg">Large radius (0.5rem)</div>
<div class="rounded-xl">Extra large radius (0.75rem)</div>
<div class="rounded-2xl">2XL radius (1rem)</div>
<div class="rounded-full">Full circle / pill shape</div>

<!-- Individual corners -->
<div class="rounded-t-lg">Top corners rounded</div>
<div class="rounded-tl-xl">Top-left corner only</div>

Divide

For lists or stacked elements, use divide to add borders between children only (not on the outer edges):

<ul class="divide-y divide-gray-200">
  <li class="py-3">Item one</li>
  <li class="py-3">Item two</li>
  <li class="py-3">Item three</li>
</ul>

Ring

Rings are like outlines that do not affect layout. They are great for focus states:

<button class="ring-2 ring-blue-500 px-4 py-2 rounded">
  Ring button
</button>

<input class="ring-1 ring-gray-300 focus:ring-2 focus:ring-indigo-500 px-3 py-2 rounded-md" />

Practical Example — Alert Boxes

<!-- Info alert -->
<div class="bg-blue-50 border-l-4 border-blue-500 text-blue-800 p-4 mb-4 rounded-r-lg">
  <p class="font-bold">Info</p>
  <p>This is an informational alert using border and spacing utilities.</p>
</div>

<!-- Warning alert -->
<div class="bg-amber-50 border-l-4 border-amber-500 text-amber-800 p-4 mb-4 rounded-r-lg">
  <p class="font-bold">Warning</p>
  <p>Something needs your attention.</p>
</div>

<!-- Error alert -->
<div class="bg-red-50 border-l-4 border-red-500 text-red-800 p-4 rounded-r-lg">
  <p class="font-bold">Error</p>
  <p>Something went wrong!</p>
</div>

Recap

• Tailwind's spacing scale uses 0.25rem increments: p-1 = 4px, p-4 = 16px, etc.
• Padding (p-), margin (m-), and space-between (space-x/y-) handle all spacing needs.
• Borders are controlled with border, border-color, and rounded utilities.
• divide and ring are specialized border tools for common UI patterns.

In the next tutorial, we will explore the Tailwind configuration file and learn how to customize the default theme.