Now, in this lesson, we’ll focus on one of the most important foundations in Tailwind:

Spacing & Sizing: margin, padding, width, and height.

Understanding spacing is key to building clean, balanced, and beautiful layouts. Let’s dive in!

🎯 What Are Utility Classes for Spacing?

Tailwind provides short, simple classes that describe exactly what spacing or size you want:

These are followed by a number. For example:

Tailwind uses a spacing scale like this:

1 → 4px
2 → 8px
3 → 12px
4 → 16px
5 → 20px
6 → 24px
...

So p-4 means padding: 16px

🧱 Margin (m) and Padding (p)

Basic usage:

<div class="m-4 p-4 bg-gray-200">
  This box has margin and padding.
</div>

Controlling specific sides:

Examples:

<p class="mt-6">Margin top only</p>
<p class="mx-4">Margin left & right</p>

🎁 Padding (p) works the same way

Example:

<button class="px-6 py-3 bg-blue-500 text-white rounded">
  Button with padding
</button>

📏 Width (w) and Height (h)

Tailwind gives multiple sizing options:

Fixed size:

<div class="w-32 h-16 bg-green-300"></div>

• w-32 = 8rem (128px)
• h-16 = 4rem (64px)

Percentage-based:

<div class="w-1/2 bg-red-300">50% width</div>

Full width or height:

<div class="w-full">Full width</div>
<div class="h-screen">Full screen height</div>

🎨 Mini Demo: Create a Simple Card Layout

Here’s a great example combining spacing + sizing:

<div class="max-w-sm p-6 bg-white rounded shadow">
  <h2 class="text-xl font-bold mb-4">Tailwind Spacing Demo</h2>
  <p class="mb-6 text-gray-600">
    Using margin and padding helps create cleaner layouts.
  </p>
  <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded">
    Learn More
  </button>
</div>

What you learned from this example:

• p-6 → Inside space for content
• mb-4, mb-6 → Space between elements
• Consistent spacing makes UI look clean & balanced

✅ Conclusion

After this lesson, you now understand how to control spacing and sizing using Tailwind:

Mastering spacing is the key to making professional designs.