Margin utilities add space outside an element's border. Tailwind's margin scale follows a consistent pattern — each unit equals 0.25rem (4px). So m-1 is 4px, m-2 is 8px, m-4 is 16px, and so on.
Margin sides
You can target all sides or individual sides.
<div class="m-4">margin on all sides — 16px</div>
<div class="mx-4">margin left and right — 16px each</div>
<div class="my-4">margin top and bottom — 16px each</div>
<div class="mt-4">margin top only</div>
<div class="mr-4">margin right only</div>
<div class="mb-4">margin bottom only</div>
<div class="ml-4">margin left only</div>
Auto margins
Auto margins are essential for centering block elements and distributing space in flex and grid layouts.
<!-- Center a block element horizontally -->
<div class="mx-auto max-w-md">Centered container</div>
<!-- Push a flex item to the right -->
<div class="flex">
<div>Left item</div>
<div class="ml-auto">Right item</div>
</div>
Negative margins
Prefix any margin with a minus sign to pull elements in the opposite direction. Great for overlapping elements.
<div class="-mt-4">Pulls element up by 16px</div>
<div class="-mx-2">Pulls element inward horizontally</div>