Check out our free templates made with AI and polished to perfection in Windframe

Get now
Last updated: 8 July 2025

Tailwind CSS Margin

Tailwind margin utility class allows you to easily add margin to elements creating space between elements or between an element and its parent.


Tailwind Margin

Tailwind CSS Margin makes it easy to customize spacing and fine-tune designs by conveniently adjusting margins around elements. It provides a set of classes that enable you to specify the margin in different directions, allowing you to create consistent spacing in your layouts.

How to apply Tailwind Margin

To apply Tailwind margin to an element, you can use the m-{size} class, where {size} can be one of the following options:

  • m-0: This sets the margin to 0, removing any space around the element.

  • m-1: This sets a small margin size.

  • m-2: This sets a medium margin size.

  • m-3: This sets a large margin size.

  • m-4: This sets an extra-large margin size.

  • m-5: This sets a huge margin size.

html
<div class="flex m-4">
<div class="mt-10... ">mt-10</div>
<div class="mr-4... ">mr-4</div>
<div class="ml-8...">ml-8</div>
<div class="mb-6...">mb-6</div>
</div>

Preview

mt-10

mr-4

ml-8

mb-6

Tailwind Margin Auto

Auto margins are incredibly useful for centering contents. Tailwind CSS provides utilities for this as well. For example:

html
<!-- Center a block level element -->
<div>
<div class="mx-auto">mx-auto</div>
</div>

Preview

mx-auto

Tailwind Horizontal Margin

To use the Tailwind horizontal margin class, you can use mx-{size} where mx repersents the horizontal axis.

html
<div class="bg-indigo-100">
<div class="text-white mx-10">mx-10</div>
</div>

Preview

mx-10

Tailwind Vertical margin

To use the Tailwind vertical margin class, you can use my-{size} where my repersents the vertical axis.

html
<div class="bg-indigo-100">
<div class="text-white my-12">my-12</div>
</div>

Preview

my-12

Tailwind Margin all sides

As previously mentioned, you can apply margin to all sides of an element using the m-{size} syntax. For example:

html
<div class="bg-indigo-100">
<div class="text-white m-5">m-5</div>
</div>

Preview

m-5

Tailwind negative margin

Tailwind CSS also supports negative margin utilities. These can be particularly useful when you want to offset an element due to padding or other layout considerations. The syntax is -m-{size}. For example:

html
<div class="flex ....">
<div class="relative ....">
<div>
<div class="-mt-8">-mt-8</div>
</div>
</div>
</div>

Preview

-mt-8

In these examples, -mt-8 applies a negative margin to the top.

Maximum Margin in Tailwind CSS

Tailwind CSS provides a wide range of margin utilities, allowing for precise spacing adjustments. The maximum predefined margin available in Tailwind CSS is represented by the class m-96, which applies a margin of 24rem. This is useful for creating significant space around elements when needed.

Example: Applying Maximum Margin

html
<div class="m-96 bg-indigo-500 text-white p-4">
This div has the maximum predefined margin of 24rem.
</div>

This utility is part of Tailwind's scale for spacing, which can be customized further if larger margins are required by modifying the Tailwind configuration file.

Responsive Tailwind Margin

Tailwind CSS provides responsive utility classes for margin, allowing you to control the margin size at different breakpoints. To use responsive Tailwind margin classes, you can append the breakpoint prefix to the margin classes. For example, md:m-4 sets the margin size to medium starting from the medium breakpoint and above

html
<div class="m-12 md:m-4">This is a div with margin.</div>

Preview

This is a div with margin.

🎯 Interaction States (hover/focus)

You can apply margin changes on hover, focus, or even group-hover. It’s rare, but useful in animations or interactive layouts.

html
<div class="mb-2 hover:mb-6 transition-all duration-200">
Hover to increase bottom margin
</div>

Preview

Hover to increase bottom margin

Use with transitions to avoid layout jumps.

⚙️ Customization in tailwind.config.js

Extend the spacing scale if your design system needs custom margin values:

js
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'13': '3.25rem',
'72': '18rem',
'fluid': 'clamp(1rem, 4vw, 2rem)',
},
},
},
};

Usage:

html
<div class="mt-13">Custom margin size</div>

Preview

Custom margin size

This lets you align Tailwind with Figma or brand spacing tokens.

✏️ Arbitrary Value Usage

Need pixel precision or dynamic spacing? Use arbitrary values.

html
<div class="mt-[18px]">Exact top margin</div>
<div class="mx-[clamp(1rem,5vw,2rem)]">Fluid horizontal spacing</div>

Preview

Exact top margin
Fluid horizontal spacing

This is useful for edge-case designs or when you're converting exact Figma specs.

🧩 Real UI Component Examples

🧾 Form Layout

html
<div class="rounded-t-xl overflow-hidden bg-indigo-100 p-5 space-y-4">
<form class="max-w-md mx-auto mt-12 space-y-6 bg-white p-6 rounded shadow-2xl">
<input class="w-full border border-gray-300 focus:border-indigo-300 p-2" placeholder="Email" />
<button class="mt-4 bg-indigo-600 text-white px-4 py-2 rounded">Submit</button>
</form>
</div>

Preview

📦 Card Grid

html
<div class="grid grid-cols-2 gap-6 mt-10">
<div class="bg-white p-6 rounded shadow">Card 1</div>
<div class="bg-white p-6 rounded shadow">Card 2</div>
</div>

Preview

Card 1

showing margin top of 40px

Card 2

showing margin top of 40px

✅ Best Practices for Devs & Designers

  • Use margin to create spacing between components, not inside them — that’s what padding is for.

  • Use mx-auto to center block elements like containers, cards, or modals.

  • Avoid chaining many margin utilities — consider grouping them with space-* or utility wrappers.

  • Keep spacing consistent across breakpoints using Tailwind’s scale.

♿ Accessibility Notes

  • Margin doesn’t affect semantic HTML or keyboard navigation directly — but poor spacing can harm readability.

  • Maintain consistent spacing between focusable elements (e.g. buttons, inputs).

  • Avoid using m-* to visually hide elements — use hidden, sr-only, or opacity-0 when necessary.

Tailwind Margin Classes Table

ClassProperties
m-0margin: 0px;
m-0.5margin: 0.125rem;
m-1margin: 0.25rem;
m-1.5margin: 0.375rem;
m-2margin: 0.5rem;
m-2.5margin: 0.625rem;
m-3margin: 0.75rem;
m-3.5margin: 0.875rem;
m-4margin: 1rem;
m-5margin: 1.25rem;
m-6margin: 1.5rem;
m-7margin: 1.75rem;
m-8margin: 2rem;
m-9margin: 2.25rem;
m-10margin: 2.5rem;
m-11margin: 2.75rem;
m-12margin: 3rem;
m-14margin: 3.5rem;
m-16margin: 4rem;
m-20margin: 5rem;
m-24margin: 6rem;
m-28margin: 7rem;
m-32margin: 8rem;
m-36margin: 9rem;
m-40margin: 10rem;
m-44margin: 11rem;
m-48margin: 12rem;
m-52margin: 13rem;
m-56margin: 14rem;
m-60margin: 15rem;
m-64margin: 16rem;
m-72margin: 18rem;
m-80margin: 20rem;
m-96margin: 24rem;
m-automargin: auto;
m-pxmargin: 1px;
-m-0margin: 0px;
-m-0.5margin: -0.125rem;
-m-1margin: -0.25rem;
-m-1.5margin: -0.375rem;
-m-2margin: -0.5rem;
-m-2.5margin: -0.625rem;
-m-3margin: -0.75rem;
-m-3.5margin: -0.875rem;
-m-4margin: -1rem;
-m-5margin: -1.25rem;
-m-6margin: -1.5rem;
-m-7margin: -1.75rem;
-m-8margin: -2rem;
-m-9margin: -2.25rem;
-m-10margin: -2.5rem;
-m-11margin: -2.75rem;
-m-12margin: -3rem;
-m-14margin: -3.5rem;
-m-16margin: -4rem;
-m-20margin: -5rem;
-m-24margin: -6rem;
-m-28margin: -7rem;
-m-32margin: -8rem;
-m-36margin: -9rem;
-m-40margin: -10rem;
-m-44margin: -11rem;
-m-48margin: -12rem;
-m-52margin: -13rem;
-m-56margin: -14rem;
-m-60margin: -15rem;
-m-64margin: -16rem;
-m-72margin: -18rem;
-m-80margin: -20rem;
-m-96margin: -24rem;
-m-pxmargin: -1px;
my-0margin-top: 0px; margin-bottom: 0px;
my-0.5margin-top: 0.125rem; margin-bottom: 0.125rem;
my-1margin-top: 0.25rem; margin-bottom: 0.25rem;
my-1.5margin-top: 0.375rem; margin-bottom: 0.375rem;
my-2margin-top: 0.5rem; margin-bottom: 0.5rem;
my-2.5margin-top: 0.625rem; margin-bottom: 0.625rem;
my-3margin-top: 0.75rem; margin-bottom: 0.75rem;
my-3.5margin-top: 0.875rem; margin-bottom: 0.875rem;
my-4margin-top: 1rem; margin-bottom: 1rem;
my-5margin-top: 1.25rem; margin-bottom: 1.25rem;
my-6margin-top: 1.5rem; margin-bottom: 1.5rem;
my-7margin-top: 1.75rem; margin-bottom: 1.75rem;
my-8margin-top: 2rem; margin-bottom: 2rem;
my-9margin-top: 2.25rem; margin-bottom: 2.25rem;
my-10margin-top: 2.5rem; margin-bottom: 2.5rem;
my-11margin-top: 2.75rem; margin-bottom: 2.75rem;
my-12margin-top: 3rem; margin-bottom: 3rem;
my-14margin-top: 3.5rem; margin-bottom: 3.5rem;
my-16margin-top: 4rem; margin-bottom: 4rem;
my-20margin-top: 5rem; margin-bottom: 5rem;
my-24margin-top: 6rem; margin-bottom: 6rem;
my-28margin-top: 7rem; margin-bottom: 7rem;
my-32margin-top: 8rem; margin-bottom: 8rem;
my-36margin-top: 9rem; margin-bottom: 9rem;
my-40margin-top: 10rem; margin-bottom: 10rem;
my-44margin-top: 11rem; margin-bottom: 11rem;
my-48margin-top: 12rem; margin-bottom: 12rem;
my-52margin-top: 13rem; margin-bottom: 13rem;
my-56margin-top: 14rem; margin-bottom: 14rem;
my-60margin-top: 15rem; margin-bottom: 15rem;
my-64margin-top: 16rem; margin-bottom: 16rem;
my-72margin-top: 18rem; margin-bottom: 18rem;
my-80margin-top: 20rem; margin-bottom: 20rem;
my-96margin-top: 24rem; margin-bottom: 24rem;
my-automargin-top: auto; margin-bottom: auto;
my-pxmargin-top: 1px; margin-bottom: 1px;
mx-0margin-left: 0px; margin-right: 0px;
mx-0.5margin-left: 0.125rem; margin-right: 0.125rem;
mx-1margin-left: 0.25rem; margin-right: 0.25rem;
mx-1.5margin-left: 0.375rem; margin-right: 0.375rem;
mx-2margin-left: 0.5rem; margin-right: 0.5rem;
mx-2.5margin-left: 0.625rem; margin-right: 0.625rem;
mx-3margin-left: 0.75rem; margin-right: 0.75rem;
mx-3.5margin-left: 0.875rem; margin-right: 0.875rem;
mx-4margin-left: 1rem; margin-right: 1rem;
mx-5margin-left: 1.25rem; margin-right: 1.25rem;
mx-6margin-left: 1.5rem; margin-right: 1.5rem;
mx-7margin-left: 1.75rem; margin-right: 1.75rem;
mx-8margin-left: 2rem; margin-right: 2rem;
mx-9margin-left: 2.25rem; margin-right: 2.25rem;
mx-10margin-left: 2.5rem; margin-right: 2.5rem;
mx-11margin-left: 2.75rem; margin-right: 2.75rem;
mx-12margin-left: 3rem; margin-right: 3rem;
mx-14margin-left: 3.5rem; margin-right: 3.5rem;
mx-16margin-left: 4rem; margin-right: 4rem;
mx-20margin-left: 5rem; margin-right: 5rem;
mx-24margin-left: 6rem; margin-right: 6rem;
mx-28margin-left: 7rem; margin-right: 7rem;
mx-32margin-left: 8rem; margin-right: 8rem;
mx-36margin-left: 9rem; margin-right: 9rem;
mx-40margin-left: 10rem; margin-right: 10rem;
mx-44margin-left: 11rem; margin-right: 11rem;
mx-48margin-left: 12rem; margin-right: 12rem;
mx-52margin-left: 13rem; margin-right: 13rem;
mx-56margin-left: 14rem; margin-right: 14rem;
mx-60margin-left: 15rem; margin-right: 15rem;
mx-64margin-left: 16rem; margin-right: 16rem;
mx-72margin-left: 18rem; margin-right: 18rem;
mx-80margin-left: 20rem; margin-right: 20rem;
mx-96margin-left: 24rem; margin-right: 24rem;
mx-automargin-left: auto; margin-right: auto;
mx-pxmargin-left: 1px; margin-right: 1px;
-my-0margin-top: 0px; margin-bottom: 0px;
-my-0.5margin-top: -0.125rem; margin-bottom: -0.125rem;
-my-1margin-top: -0.25rem; margin-bottom: -0.25rem;
-my-1.5margin-top: -0.375rem; margin-bottom: -0.375rem;
-my-2margin-top: -0.5rem; margin-bottom: -0.5rem;
-my-2.5margin-top: -0.625rem; margin-bottom: -0.625rem;
-my-3margin-top: -0.75rem; margin-bottom: -0.75rem;
-my-3.5margin-top: -0.875rem; margin-bottom: -0.875rem;
-my-4margin-top: -1rem; margin-bottom: -1rem;
-my-5margin-top: -1.25rem; margin-bottom: -1.25rem;
-my-6margin-top: -1.5rem; margin-bottom: -1.5rem;
-my-7margin-top: -1.75rem; margin-bottom: -1.75rem;
-my-8margin-top: -2rem; margin-bottom: -2rem;
-my-9margin-top: -2.25rem; margin-bottom: -2.25rem;
-my-10margin-top: -2.5rem; margin-bottom: -2.5rem;
-my-11margin-top: -2.75rem; margin-bottom: -2.75rem;
-my-12margin-top: -3rem; margin-bottom: -3rem;
-my-14margin-top: -3.5rem; margin-bottom: -3.5rem;
-my-16margin-top: -4rem; margin-bottom: -4rem;
-my-20margin-top: -5rem; margin-bottom: -5rem;
-my-24margin-top: -6rem; margin-bottom: -6rem;
-my-28margin-top: -7rem; margin-bottom: -7rem;
-my-32margin-top: -8rem; margin-bottom: -8rem;
-my-36margin-top: -9rem; margin-bottom: -9rem;
-my-40margin-top: -10rem; margin-bottom: -10rem;
-my-44margin-top: -11rem; margin-bottom: -11rem;
-my-48margin-top: -12rem; margin-bottom: -12rem;
-my-52margin-top: -13rem; margin-bottom: -13rem;
-my-56margin-top: -14rem; margin-bottom: -14rem;
-my-60margin-top: -15rem; margin-bottom: -15rem;
-my-64margin-top: -16rem; margin-bottom: -16rem;
-my-72margin-top: -18rem; margin-bottom: -18rem;
-my-80margin-top: -20rem; margin-bottom: -20rem;
-my-96margin-top: -24rem; margin-bottom: -24rem;
-my-pxmargin-top: -1px; margin-bottom: -1px;
-mx-0margin-left: 0px; margin-right: 0px;
-mx-0.5margin-left: -0.125rem; margin-right: -0.125rem;
-mx-1margin-left: -0.25rem; margin-right: -0.25rem;
-mx-1.5margin-left: -0.375rem; margin-right: -0.375rem;
-mx-2margin-left: -0.5rem; margin-right: -0.5rem;
-mx-2.5margin-left: -0.625rem; margin-right: -0.625rem;
-mx-3margin-left: -0.75rem; margin-right: -0.75rem;
-mx-3.5margin-left: -0.875rem; margin-right: -0.875rem;
-mx-4margin-left: -1rem; margin-right: -1rem;
-mx-5margin-left: -1.25rem; margin-right: -1.25rem;
-mx-6margin-left: -1.5rem; margin-right: -1.5rem;
-mx-7margin-left: -1.75rem; margin-right: -1.75rem;
-mx-8margin-left: -2rem; margin-right: -2rem;
-mx-9margin-left: -2.25rem; margin-right: -2.25rem;
-mx-10margin-left: -2.5rem; margin-right: -2.5rem;
-mx-11margin-left: -2.75rem; margin-right: -2.75rem;
-mx-12margin-left: -3rem; margin-right: -3rem;
-mx-14margin-left: -3.5rem; margin-right: -3.5rem;
-mx-16margin-left: -4rem; margin-right: -4rem;
-mx-20margin-left: -5rem; margin-right: -5rem;
-mx-24margin-left: -6rem; margin-right: -6rem;
-mx-28margin-left: -7rem; margin-right: -7rem;
-mx-32margin-left: -8rem; margin-right: -8rem;
-mx-36margin-left: -9rem; margin-right: -9rem;
-mx-40margin-left: -10rem; margin-right: -10rem;
-mx-44margin-left: -11rem; margin-right: -11rem;
-mx-48margin-left: -12rem; margin-right: -12rem;
-mx-52margin-left: -13rem; margin-right: -13rem;
-mx-56margin-left: -14rem; margin-right: -14rem;
-mx-60margin-left: -15rem; margin-right: -15rem;
-mx-64margin-left: -16rem; margin-right: -16rem;
-mx-72margin-left: -18rem; margin-right: -18rem;
-mx-80margin-left: -20rem; margin-right: -20rem;
-mx-96margin-left: -24rem; margin-right: -24rem;
-mx-pxmargin-left: -1px; margin-right: -1px;
-mt-0margin-top: 0px;
-mt-0.5margin-top: -0.125rem;
-mt-1margin-top: -0.25rem;
-mt-1.5margin-top: -0.375rem;
-mt-2margin-top: -0.5rem;
-mt-2.5margin-top: -0.625rem;
-mt-3margin-top: -0.75rem;
-mt-3.5margin-top: -0.875rem;
-mt-4margin-top: -1rem;
-mt-5margin-top: -1.25rem;
-mt-6margin-top: -1.5rem;
-mt-7margin-top: -1.75rem;
-mt-8margin-top: -2rem;
-mt-9margin-top: -2.25rem;
-mt-10margin-top: -2.5rem;
-mt-11margin-top: -2.75rem;
-mt-12margin-top: -3rem;
-mt-14margin-top: -3.5rem;
-mt-16margin-top: -4rem;
-mt-20margin-top: -5rem;
-mt-24margin-top: -6rem;
-mt-28margin-top: -7rem;
-mt-32margin-top: -8rem;
-mt-36margin-top: -9rem;
-mt-40margin-top: -10rem;
-mt-44margin-top: -11rem;
-mt-48margin-top: -12rem;
-mt-52margin-top: -13rem;
-mt-56margin-top: -14rem;
-mt-60margin-top: -15rem;
-mt-64margin-top: -16rem;
-mt-72margin-top: -18rem;
-mt-80margin-top: -20rem;
-mt-96margin-top: -24rem;
-mt-pxmargin-top: -1px;
-mr-0margin-right: 0px;
-mr-0.5margin-right: -0.125rem;
-mr-1margin-right: -0.25rem;
-mr-1.5margin-right: -0.375rem;
-mr-2margin-right: -0.5rem;
-mr-2.5margin-right: -0.625rem;
-mr-3margin-right: -0.75rem;
-mr-3.5margin-right: -0.875rem;
-mr-4margin-right: -1rem;
-mr-5margin-right: -1.25rem;
-mr-6margin-right: -1.5rem;
-mr-7margin-right: -1.75rem;
-mr-8margin-right: -2rem;
-mr-9margin-right: -2.25rem;
-mr-10margin-right: -2.5rem;
-mr-11margin-right: -2.75rem;
-mr-12margin-right: -3rem;
-mr-14margin-right: -3.5rem;
-mr-16margin-right: -4rem;
-mr-20margin-right: -5rem;
-mr-24margin-right: -6rem;
-mr-28margin-right: -7rem;
-mr-32margin-right: -8rem;
-mr-36margin-right: -9rem;
-mr-40margin-right: -10rem;
-mr-44margin-right: -11rem;
-mr-48margin-right: -12rem;
-mr-52margin-right: -13rem;
-mr-56margin-right: -14rem;
-mr-60margin-right: -15rem;
-mr-64margin-right: -16rem;
-mr-72margin-right: -18rem;
-mr-80margin-right: -20rem;
-mr-96margin-right: -24rem;
-mr-pxmargin-right: -1px;
-mb-0margin-bottom: 0px;
-mb-0.5margin-bottom: -0.125rem;
-mb-1margin-bottom: -0.25rem;
-mb-1.5margin-bottom: -0.375rem;
-mb-2margin-bottom: -0.5rem;
-mb-2.5margin-bottom: -0.625rem;
-mb-3margin-bottom: -0.75rem;
-mb-3.5margin-bottom: -0.875rem;
-mb-4margin-bottom: -1rem;
-mb-5margin-bottom: -1.25rem;
-mb-6margin-bottom: -1.5rem;
-mb-7margin-bottom: -1.75rem;
-mb-8margin-bottom: -2rem;
-mb-9margin-bottom: -2.25rem;
-mb-10margin-bottom: -2.5rem;
-mb-11margin-bottom: -2.75rem;
-mb-12margin-bottom: -3rem;
-mb-14margin-bottom: -3.5rem;
-mb-16margin-bottom: -4rem;
-mb-20margin-bottom: -5rem;
-mb-24margin-bottom: -6rem;
-mb-28margin-bottom: -7rem;
-mb-32margin-bottom: -8rem;
-mb-36margin-bottom: -9rem;
-mb-40margin-bottom: -10rem;
-mb-44margin-bottom: -11rem;
-mb-48margin-bottom: -12rem;
-mb-52margin-bottom: -13rem;
-mb-56margin-bottom: -14rem;
-mb-60margin-bottom: -15rem;
-mb-64margin-bottom: -16rem;
-mb-72margin-bottom: -18rem;
-mb-80margin-bottom: -20rem;
-mb-96margin-bottom: -24rem;
-mb-pxmargin-bottom: -1px;
-ml-0margin-left: 0px;
-ml-0.5margin-left: -0.125rem;
-ml-1margin-left: -0.25rem;
-ml-1.5margin-left: -0.375rem;
-ml-2margin-left: -0.5rem;
-ml-2.5margin-left: -0.625rem;
-ml-3margin-left: -0.75rem;
-ml-3.5margin-left: -0.875rem;
-ml-4margin-left: -1rem;
-ml-5margin-left: -1.25rem;
-ml-6margin-left: -1.5rem;
-ml-7margin-left: -1.75rem;
-ml-8margin-left: -2rem;
-ml-9margin-left: -2.25rem;
-ml-10margin-left: -2.5rem;
-ml-11margin-left: -2.75rem;
-ml-12margin-left: -3rem;
-ml-14margin-left: -3.5rem;
-ml-16margin-left: -4rem;
-ml-20margin-left: -5rem;
-ml-24margin-left: -6rem;
-ml-28margin-left: -7rem;
-ml-32margin-left: -8rem;
-ml-36margin-left: -9rem;
-ml-40margin-left: -10rem;
-ml-44margin-left: -11rem;
-ml-48margin-left: -12rem;
-ml-52margin-left: -13rem;
-ml-56margin-left: -14rem;
-ml-60margin-left: -15rem;
-ml-64margin-left: -16rem;
-ml-72margin-left: -18rem;
-ml-80margin-left: -20rem;
-ml-96margin-left: -24rem;
-ml-pxmargin-left: -1px;

✨ What's Next?

Windframe Tailwind blocks

Landing page

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates