0
0
Tailwindmarkup~5 mins

Margin utilities in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Margin utilities help you add space outside elements easily. This keeps your design neat and readable.

To separate buttons so they don't stick together.
To add space between paragraphs for better reading.
To push a box away from the edge of the screen.
To create breathing room around images or cards.
To adjust spacing quickly without writing custom CSS.
Syntax
Tailwind
m-{size}  // sets margin on all sides
mt-{size} // margin-top
mr-{size} // margin-right
mb-{size} // margin-bottom
ml-{size} // margin-left
mx-{size} // margin-left and margin-right
my-{size} // margin-top and margin-bottom

Replace {size} with numbers like 0, 1, 2, 4, 8, etc., which correspond to spacing values.

Use mx and my to set horizontal or vertical margins quickly.

Examples
Adds margin of size 4 on all sides of the element.
Tailwind
m-4
Adds margin only on the top with size 2.
Tailwind
mt-2
Adds margin on left and right sides with size 6.
Tailwind
mx-6
Removes bottom margin by setting it to zero.
Tailwind
mb-0
Sample Program

This page shows four colored boxes with different margin utilities applied. You can see how space changes around each box.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Margin Utilities Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <div class="bg-blue-200 p-4 m-4">Box with m-4 (margin all sides)</div>
  <div class="bg-green-200 p-4 mt-2">Box with mt-2 (margin top only)</div>
  <div class="bg-red-200 p-4 mx-6">Box with mx-6 (margin left and right)</div>
  <div class="bg-yellow-200 p-4 mb-0">Box with mb-0 (no bottom margin)</div>
</body>
</html>
OutputSuccess
Important Notes

Tailwind margin sizes are based on a scale, usually multiples of 0.25rem (4px).

Negative margins are possible using -m-4 to pull elements closer.

Use browser DevTools to inspect margin spacing visually.

Summary

Margin utilities add space outside elements quickly.

Use m, mt, mr, mb, ml, mx, and my for different sides.

Sizes control how much space is added, making layout easy and consistent.