Margin
Add outer space with m, mx, my and auto centering.
Syntax
class="mt-4 mx-auto mb-8"Margin utilities add space outside an element. They mirror padding: m, mx, my, and single sides like mt.
mt-4— margin on top.mx-auto— center a block horizontally.-mt-2— negative margin (note the minus).
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer stacks sections vertically with consistent rhythm by adding mb-8 to each section wrapper.
- An image is centered inside a container using mx-auto to distribute remaining horizontal space equally on both sides.
- A tag in a list of tags uses mt-1 mr-2 to separate it from adjacent tags without a wrapper layout element.
More examples
Vertical margin spacing
mt-8 creates space above the heading, mb-4 separates it from the paragraph below, and mb-6 adds a larger gap after the paragraph.
<h2 class="text-2xl font-bold mt-8 mb-4">Section Title</h2>
<p class="text-gray-600 mb-6">Section body paragraph.</p>Center block with mx-auto
mx-auto distributes remaining horizontal space equally on left and right, centering the fixed-width image within its parent.
<img
src="logo.png"
alt="Logo"
class="w-32 mx-auto block"
/>Inline tag margin
gap-2 on the flex-wrap container replaces individual margin utilities to space tags consistently in all wrapping directions.
<div class="flex flex-wrap gap-2">
<span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">Tailwind</span>
<span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">CSS</span>
<span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">Utility</span>
</div>
Discussion