Margin

Margin controls the space outside an element. In Tailwind, the prefix is m.

Directions

• m-{size}: Margin on all sides
• mx-{size}: Margin on left and right (horizontal axis)
• my-{size}: Margin on top and bottom (vertical axis)
• mt-{size}: Margin top
• mr-{size}, mb-{size}, ml-{size}: Right, bottom, left

Sizes

Sizes are based on a proportional scale. m-4 is equal to 1rem (16px), m-8 is 2rem.

<div class="mt-4 mb-8">
  This has top and bottom margins.
</div>

Auto Margin

Use mx-auto to horizontally center a block element!