Spacing Scale: Padding, Margin, and Gap

Tailwind uses a consistent spacing scale where each unit equals 0.25rem (4px at default root font size). The scale runs from 0 to 96 with most values in the 0 to 16 range having single-unit increments, then jumping by 2, 4, and 8 for larger values. Key milestones to memorise: 1=4px, 2=8px, 4=16px, 6=24px, 8=32px, 10=40px, 12=48px, 16=64px, 24=96px, 32=128px. Padding utilities follow the pattern p-* (all sides), px-* (horizontal), py-* (vertical), pt-*, pr-*, pb-*, pl-* (individual sides). Margin works identically with m-*, mx-*, my-*, mt-*, mr-*, mb-*, ml-*, plus mx-auto and my-auto for centering. Negative margins use a hyphen prefix: -mt-4 produces margin-top: -1rem, useful for overlapping elements or compensating for borders. The space-x-* and space-y-* utilities add margin between sibling elements using the CSS adjacent sibling selector, providing an alternative to gap when you need spacing between children without using flex or grid on the parent. space-x-4 adds a left margin of 1rem to every child except the first, and space-y-3 adds a top margin to every child except the first, making it convenient for stacking card lists or navigation items.

Example

<!-- Padding varieties -->
<div class="p-4">All sides 1rem</div>
<div class="px-6 py-3">Horizontal 1.5rem, vertical 0.75rem</div>
<div class="pt-8 pb-4 px-4">Top 2rem, bottom 1rem, sides 1rem</div>
<div class="p-0.5">2px padding (fractional value)</div>

<!-- Margin and centering -->
<div class="max-w-xl mx-auto my-8 bg-white rounded-xl shadow p-6">
  Centered container with vertical margin
</div>

<!-- Negative margin for overlap effect -->
<div class="relative bg-blue-500 h-32 rounded-t-xl"></div>
<div class="bg-white rounded-xl shadow p-6 mx-4 -mt-6 relative z-10">
  Card overlapping the banner above
</div>

<!-- space-y for stacked lists (no flex/grid needed) -->
<ul class="space-y-3 p-4">
  <li class="bg-white rounded-lg shadow p-4">List item 1</li>
  <li class="bg-white rounded-lg shadow p-4">List item 2</li>
  <li class="bg-white rounded-lg shadow p-4">List item 3</li>
</ul>

<!-- space-x for inline tag groups -->
<div class="flex flex-wrap space-x-2">
  <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">React</span>
  <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">TypeScript</span>
  <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Tailwind</span>
</div>

<!-- Responsive spacing -->
<section class="py-8 md:py-16 lg:py-24 px-4 sm:px-8 lg:px-16">
  Generous vertical padding that scales with viewport
</section>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned