Last updated: 11 May 2024

Tailwind 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.

Applying 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.

Tailwind Responsive 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-2 sets the margin size to medium starting from the medium breakpoint and above

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

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;

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