Part 8: Spacing Utilities: Margin, Padding & Space-Between

Controlling whitespace around and within elements is the cornerstone of clean graphic design. Tailwind provides directional margin and padding utilities.

1. Padding Utilities (p-*)

• p-4: Padding on all 4 sides (1rem).
• px-6: Horizontal padding (padding-left and padding-right).
• py-3: Vertical padding (padding-top and padding-bottom).
• Directional: pt-4 (top), pr-4 (right), pb-4 (bottom), pl-4 (left).

2. Margin Utilities (m-*)

• m-auto: Centers block elements horizontally inside a parent with explicit width (mx-auto).
• my-8: Vertical margin.
• Negative Margins: Prefix with a minus sign (e.g., -mt-4 for margin-top: -1rem).

<div class="max-w-md mx-auto p-6 bg-white rounded-xl shadow">
  <h2 class="text-xl font-bold mb-3">Card Title</h2>
  <p class="text-slate-600">Centered card with mx-auto.</p>
</div>

3. The space-x and space-y Helpers

To add consistent spacing between child elements without writing margins on every single child:

<ul class="space-y-3">
  <li class="p-3 bg-slate-100 rounded">Item 1</li>
  <li class="p-3 bg-slate-100 rounded">Item 2</li>
  <li class="p-3 bg-slate-100 rounded">Item 3</li>
</ul>

(Note: In flex and grid containers, modern CSS gap-* is often preferred over space-*).

Key Takeaways

• Use px-* and py-* for directional padding.
• Use mx-auto to center block elements horizontally.
• Negative margins are supported with -m* prefixes.

In Part 9, we will explore the Display Property: Block, Inline, Hidden & Inline-Block!