Margin In Tailwind CSS
Tailwind Margin allows you to add space around elements without having to write custom CSS. In this article, we will explore Tailwind margin and how it can be used to create effective layouts with examples.
Margin is a CSS property that creates space around an element.
It determines the amount of space between an element’s border and adjacent elements in the layout.
You can set the margin property for each side of the element individually (top, right, bottom, and left), or for all sides together.
Tailwind Margin Classes
Tailwind margin property can be set specifying a various classes, each with a specific value.
| Classes | Overview |
| m-0 | This class is used to set the margin on all sides of an element to 0. |
| mx-0 | This class is used to set the horizontal margin of an element to 0. |
| my-0 | This class is used to set the vertical margin of an element to 0. |
| mt-0 | This class is used to set the top margin of an element to 0. |
| mr-0 | This class is used to set the right margin of an element to 0. |
| mb-0 | This class is used to set the bottom margin of an element to 0. |
| ml-0 | This class is used to set the left margin of an element to 0. |
| m-px | Using this class ,the margin on all sides is set to 1px. |
| mx-px | Using this class ,the horizontal margin is set to 1px. |
| my-px | Using this class ,the vertical margin on is set to 1px. |
| mt-px | Using this class ,the top margin is set to 1px. |
| mr-px | Using this class ,the right margin is set to 1px. |
| mb-px | Using this class ,the bottom margin is set to 1px. |
| ml-px | Using this class ,the left margin is set to 1px. |
| m-0.5 | The margin on all sides is set to 0.125rem or 2px. |
| mx-0.5 | The horizontal margin is set to 0.125rem or 2px. |
| my-0.5 | The vertical margin is set to 0.125rem or 2px. |
| mt-0.5 | The top margin is set to 0.125rem or 2px. |
| mr-0.5 | The right margin is set to 0.125rem or 2px. |
| mb-0.5 | The bottom margin is set to 0.125rem or 2px. |
| ml-0.5 | The left margin is set to 0.125rem or 2px. |
| m-1 | The margin on all sides is set to 0.25rem or 4px. |
| mx-1 | The horizontal margin is set to 0.25rem or 4px. |
| my-1 | The vertical margin is set to 0.25rem or 4px. |
| mt-1 | The top margin is set to 0.25rem or 4px. |
| mr-1 | The right margin is set to 0.25rem or 4px. |
| mb-1 | The bottom margin is set to 0.25rem or 4px. |
| ml-1 | The left margin is set to 0.25rem or 4px. |
| m-1.5 | The margin on all sides is set to 0.375rem or 6px. |
| mx-1.5 | The horizontal margin is set to 0.375rem or 6px. |
| my-1.5 | The vertical margin is set to 0.375rem or 6px. |
| mt-1.5 | The top margin is set to 0.375rem or 6px. |
| mr-1.5 | The right margin is set to 0.375rem or 6px. |
| mb-1.5 | The bottom margin is set to 0.375rem or 6px. |
| ml-1.5 | The left margin is set to 0.375rem or 6px. |
| m-2 | The margin on all sides is set to 0.5rem or 8px. |
| mx-2 | The horizontal margin is set to 0.5rem or 8px. |
| my-2 | The vertical margin is set to 0.5rem or 8px. |
| mt-2 | The top margin is set to 0.5rem or 8px. |
| mr-2 | The right margin is set to 0.5rem or 8px. |
| mb-2 | The bottom margin is set to 0.5rem or 8px. |
| ml-2 | The left margin is set to 0.5rem or 8px. |
| m-2.5 | The margin on all sides is set to 0.625rem or 10px. |
| mx-2.5 | The horizontal margin is set to 0.625rem or 10px. |
| my-2.5 | The vertical margin is set to 0.625rem or 10px. |
| mt-2.5 | The top margin is set to 0.625rem or 10px. |
| mr-2.5 | The right margin is set to 0.625rem or 10px. |
| mb-2.5 | The bottom margin is set to 0.625rem or 10px. |
| ml-2.5 | The left margin is set to 0.625rem or 10px. |
| m-3 | The margin on all sides is equal to 0.75rem or 12px. |
| mx-3 | The horizontal margin is equal to 0.75rem or 12px. |
| my-3 | The vertical margin is equal to 0.75rem or 12px. |
| mt-3 | The top margin is equal to 0.75rem or 12px. |
| mr-3 | The right margin is equal to 0.75rem or 12px. |
| mb-3 | The bottom margin is equal to 0.75rem or 12px. |
| ml-3 | The left margin is equal to 0.75rem or 12px. |
| m-3.5 | The margin on all sides is specified as 0.875rem or 14px. |
| mx-3.5 | The horizontal margin is specified as 0.875rem or 14px. |
| my-3.5 | The vertical margin is specified as 0.875rem or 14px. |
| mt-3.5 | The top margin is specified as 0.875rem or 14px. |
| mr-3.5 | The right margin is specified as 0.875rem or 14px. |
| mb-3.5 | The bottom margin is specified as 0.875rem or 14px. |
| ml-3.5 | The left margin is specified as 0.875rem or 14px. |
| m-4 | The margin on all sides is defined as 1rem or 16px. |
| mx-4 | The horizontal margin is defined as 1rem or 16px. |
| my-4 | The vertical margin is defined as 1rem or 16px. |
| mt-4 | The top margin is defined as 1rem or 16px. |
| mr-4 | The right margin is defined as 1rem or 16px. |
| mb-4 | The bottom margin is defined as 1rem or 16px. |
| ml-4 | The left margin is defined as 1rem or 16px. |
| m-5 | The margin on all sides is set to 1.25rem or 20px. |
| mx-5 | The horizontal margin is set to 1.25rem or 20px. |
| my-5 | The vertical margin is set to 1.25rem or 20px. |
| mt-5 | The top margin is set to 1.25rem or 20px. |
| mr-5 | The right margin is set to 1.25rem or 20px. |
| mb-5 | The bottom margin is set to 1.25rem or 20px. |
| ml-5 | The left margin is set to 1.25rem or 20px. |
| m-6 | The margin on all sides is equal to 1.5rem or 24px. |
| mx-6 | The horizontal margin is equal to 1.5rem or 24px. |
| my-6 | The vertical margin is equal to 1.5rem or 24px. |
| mt-6 | The top margin is equal to 1.5rem or 24px. |
| mr-6 | The right margin is equal to 1.5rem or 24px. |
| mb-6 | The bottom margin is equal to 1.5rem or 24px. |
| ml-6 | The left margin is equal to 1.5rem or 24px. |
| m-7 | Margin on all sides is specified as 1.75rem or 28px. |
| mx-7 | Margin along the x-axis is specified as 1.75rem or 28px. |
| my-7 | Margin along the y-axis is specified as 1.75rem or 28px. |
| mt-7 | Margin on top is specified as 1.75rem or 28px. |
| mr-7 | Margin on right is specified as 1.75rem or 28px. |
| mb-7 | Margin on bottom is specified as 1.75rem or 28px. |
| ml-7 | Margin on left is specified as 1.75rem or 28px. |
| m-8 | Margin on all sides is defined as 2rem or 32px. |
| mx-8 | Margin along the x-axis is defined as 2rem or 32px. |
| my-8 | Margin along the y-axis is defined as 2rem or 32px. |
| mt-8 | Margin on top is defined as 2rem or 32px. |
| mr-8 | Margin on right is defined as 2rem or 32px. |
| mb-8 | Margin on bottom is defined as 2rem or 32px. |
| ml-8 | Margin on left is defined as 2rem or 32px. |
| m-9 | There is a 2.25rem or 36px margin on all sides. |
| mx-9 | There is a 2.25rem or 36px margin along the x-axis. |
| my-9 | There is a 2.25rem or 36px margin along the y-axis. |
| mt-9 | There is a 2.25rem or 36px margin on the top. |
| mr-9 | There is a 2.25rem or 36px margin on the right side. |
| mb-9 | There is a 2.25rem or 36px margin on the bottom. |
| ml-9 | There is a 2.25rem or 36px margin on the left side. |
| m-10 | The margin on all sides is equal to 2.5rem or 40px. |
| mx-10 | The margin along the x-axis is equal to 2.5rem or 40px. |
| my-10 | The margin along the y-axis is equal to 2.5rem or 40px. |
| mt-10 | The margin on the top is equal to 2.5rem or 40px. |
| mr-10 | The margin on the right is equal to 2.5rem or 40px. |
| mb-10 | The margin on the bottom is equal to 2.5rem or 40px. |
| ml-10 | The margin on the left is equal to 2.5rem or 40px. |
| m-11 | The margin on all sides is specified as 2.75rem or 44px. |
| mx-11 | The horizontal margin is specified as 2.75rem or 44px. |
| my-11 | The vertical margin is specified as 2.75rem or 44px. |
| mt-11 | The top margin is specified as 2.75rem or 44px. |
| mr-11 | The right margin is specified as 2.75rem or 44px. |
| mb-11 | The bottom margin is specified as 2.75rem or 44px. |
| ml-11 | The left margin is specified as 2.75rem or 44px. |
| m-12 | The margin on all sides is defined as 3rem or 48px. |
| mx-12 | The margin along the x-axis is defined as 3rem or 48px. |
| my-12 | The margin along the y-axis is defined as 3rem or 48px. |
| mt-12 | The margin on the top is defined as 3rem or 48px. |
| mr-12 | The margin on the right is defined as 3rem or 48px. |
| mb-12 | The margin on the bottom is defined as 3rem or 48px. |
| ml-12 | The margin on the left is defined as 3rem or 48px. |
| m-14 | This class applies a margin of 3.5rem or 56px on all sides. |
| mx-14 | This class applies a margin of 3.5rem or 56px along the x-axis. |
| my-14 | This class applies a margin of 3.5rem or 56px along the y-axis. |
| mt-14 | This class applies a margin of 3.5rem or 56px on the top. |
| mr-14 | This class applies a margin of 3.5rem or 56px on the right. |
| mb-14 | This class applies a margin of 3.5rem or 56px on the bottom. |
| ml-14 | This class applies a margin of 3.5rem or 56px on the left. |
| m-16 | A margin of 4rem or 64px is applied on all sides. |
| mx-16 | A margin of 4rem or 64px is applied along the x-axis. |
| my-16 | A margin of 4rem or 64px is applied along the y-axis. |
| mt-16 | A margin of 4rem or 64px is applied on the top. |
| mr-16 | A margin of 4rem or 64px is applied on the right. |
| mb-16 | A margin of 4rem or 64px is applied on the bottom. |
| ml-16 | A margin of 4rem or 64px is applied on the left. |
| m-20 | Used to apply a margin of 5rem or 80px on all sides. |
| mx-20 | Used to apply a margin of 5rem or 80px along the x-axis. |
| my-20 | Used to apply a margin of 5rem or 80px along the y-axis. |
| mt-20 | Used to apply a margin of 5rem or 80px on the top. |
| mr-20 | Used to apply a margin of 5rem or 80px on the right. |
| mb-20 | Used to apply a margin of 5rem or 80px on the bottom. |
| ml-20 | Used to apply a margin of 5rem or 80px on the left. |
| m-24 | This class is used to add a margin of 6rem or 96px to all sides. |
| mx-24 | This class is used to add a margin of 6rem or 96px along the x-axis.. |
| my-24 | This class is used to add a margin of 6rem or 96px along the y-axis. |
| mt-24 | This class is used to add a margin of 6rem or 96px to the top. |
| mr-24 | This class is used to add a margin of 6rem or 96px to the right. |
| mb-24 | This class is used to add a margin of 6rem or 96px to the bottom. |
| ml-24 | This class is used to add a margin of 6rem or 96px to the left. |
| m-28 | Adds a margin of 7rem or 112px on all sides. |
| mx-28 | Adds a margin of 7rem or 112px along the x-axis. |
| my-28 | Adds a margin of 7rem or 112px along the y-axis. |
| mt-28 | Adds a margin of 7rem or 112px on the top. |
| mr-28 | Adds a margin of 7rem or 112px on the right. |
| mb-28 | Adds a margin of 7rem or 112px on the bottom. |
| ml-28 | Adds a margin of 7rem or 112px on the left. |
| m-32 | This class applies a margin of 8rem or 128px on all sides. |
| mx-32 | This class applies a margin of 8rem or 128px along the x-axis. |
| my-32 | This class applies a margin of 8rem or 128px along the y-axis. |
| mt-32 | This class applies a margin of 8rem or 128px on the top. |
| mr-32 | This class applies a margin of 8rem or 128px on the right. |
| mb-32 | This class applies a margin of 8rem or 128px on the bottom. |
| ml-32 | This class applies a margin of 8rem or 128px on the left. |
| m-36 | A margin of 9rem or 144px is applied on all sides. |
| mx-36 | A margin of 9rem or 144px is applied on all sides. |
| my-36 | A margin of 9rem or 144px is applied on all sides. |
| mt-36 | A margin of 9rem or 144px is applied on all sides. |
| mr-36 | A margin of 9rem or 144px is applied on all sides. |
| mb-36 | A margin of 9rem or 144px is applied on all sides. |
| ml-36 | A margin of 9rem or 144px is applied on all sides. |
| m-40 | Used to apply a margin of 10rem or 160px on all sides. |
| mx-40 | Used to apply a margin of 10rem or 160px on all sides. |
| my-40 | Used to apply a margin of 10rem or 160px on all sides. |
| mt-40 | Used to apply a margin of 10rem or 160px on all sides. |
| mr-40 | Used to apply a margin of 10rem or 160px on all sides. |
| mb-40 | Used to apply a margin of 10rem or 160px on all sides. |
| ml-40 | Used to apply a margin of 10rem or 160px on all sides. |
| m-44 | Using this class ,the margin on all sides is set to 11rem or 176px. |
| mx-44 | Using this class ,the horizontal margin is set to 11rem or 176px. |
| my-44 | Using this class ,the vertical margin is set to 11rem or 176px. |
| mt-44 | Using this class ,the margin on the top is set to 11rem or 176px. |
| mr-44 | Using this class ,the margin on the right is set to 11rem or 176px. |
| mb-44 | Using this class ,the margin on the bottom is set to 11rem or 176px. |
| ml-44 | Using this class ,the margin on the left is set to 11rem or 176px. |
| m-48 | The margin on all sides is defined as 12rem or 192px. |
| mx-48 | The margin along the x-axis is defined as 12rem or 192px. |
| my-48 | The margin along the y-axis is defined as 12rem or 192px. |
| mt-48 | The margin on the top is defined as 12rem or 192px. |
| mr-48 | The margin on the right is defined as 12rem or 192px. |
| mb-48 | The margin on the bottom is defined as 12rem or 192px. |
| ml-48 | The margin on the left is defined as 12rem or 192px. |
| m-52 | Margin on all sides is specified as 13rem or 208px. |
| mx-52 | Margin along the x-axis is specified as 13rem or 208px. |
| my-52 | Margin along the y-axis is specified as 13rem or 208px. |
| mt-52 | Margin on the top is specified as 13rem or 208px. |
| mr-52 | Margin on the right is specified as 13rem or 208px. |
| mb-52 | Margin on the bottom is specified as 13rem or 208px. |
| ml-52 | Margin on the left is specified as 13rem or 208px. |
| m-56 | The margin on all sides is set to 14rem or 224px. |
| mx-56 | The horizontal margin is set to 14rem or 224px. |
| my-56 | The vertical margin is set to 14rem or 224px. |
| mt-56 | The top margin is set to 14rem or 224px. |
| mr-56 | The right margin is set to 14rem or 224px. |
| mb-56 | The bottom margin is set to 14rem or 224px. |
| ml-56 | The left margin is set to 14rem or 224px. |
| m-60 | The margin on all sides is equal to 15rem or 240px. |
| mx-60 | The margin on all sides is equal to 15rem or 240px. |
| my-60 | The margin on all sides is equal to 15rem or 240px. |
| mt-60 | The margin on all sides is equal to 15rem or 240px. |
| mr-60 | The margin on all sides is equal to 15rem or 240px. |
| mb-60 | The margin on all sides is equal to 15rem or 240px. |
| ml-60 | The margin on all sides is equal to 15rem or 240px. |
| m-64 | Used to apply a margin of 16rem or 256px on all sides. |
| mx-64 | Used to apply a margin of 16rem or 256px along the x-axis. |
| my-64 | Used to apply a margin of 16rem or 256px along the y-axis. |
| mt-64 | Used to apply a margin of 16rem or 256px on the top. |
| mr-64 | Used to apply a margin of 16rem or 256px on the right. |
| mb-64 | Used to apply a margin of 16rem or 256px on the bottom. |
| ml-64 | Used to apply a margin of 16rem or 256px on the left. |
| m-72 | This class applies a margin of 18rem or 288px on all sides. |
| mx-72 | This class applies a margin of 18rem or 288px horizontally. |
| my-72 | This class applies a margin of 18rem or 288px vertically. |
| mt-72 | This class applies a margin of 18rem or 288px on the top. |
| mr-72 | This class applies a margin of 18rem or 288px on the right. |
| mb-72 | This class applies a margin of 18rem or 288px on the bottom. |
| ml-72 | This class applies a margin of 18rem or 288px on the left. |
| m-80 | A margin of 20rem or 320px is applied on all sides. |
| mx-80 | A margin of 20rem or 320px is applied along the x-axis. |
| my-80 | A margin of 20rem or 320px is applied along the y-axis. |
| mt-80 | A margin of 20rem or 320px is applied on the top. |
| mr-80 | A margin of 20rem or 320px is applied on the right. |
| mb-80 | A margin of 20rem or 320px is applied on the bottom. |
| ml-80 | A margin of 20rem or 320px is applied on the left. |
| m-96 | Adds a margin of 24rem or 384px on all sides. |
| mx-96 | Adds a margin of 24rem or 384px along the x-axis. |
| my-96 | Adds a margin of 24rem or 384px along the y-axis. |
| mt-96 | Adds a margin of 24rem or 384px on the top. |
| mr-96 | Adds a margin of 24rem or 384px on the right. |
| mb-96 | Adds a margin of 24rem or 384px on the bottom. |
| ml-96 | Adds a margin of 24rem or 384px on the left. |
| m-auto | Margin on all sides is defined as auto. |
| mx-auto | Margin along the x-axis is defined as auto. |
| my-auto | Margin along the y-axis is defined as auto. |
| mt-auto | Margin on the top is defined as auto. |
| mr-auto | Margin on the right is defined as auto. |
| mb-auto | Margin on the bottom is defined as auto. |
| ml-auto | Margin on the left is defined as auto. |
Syntax
<element class="m-0">...</element>
Note: One can use a negative margin value by prefixing the class name with a dash such as -mt-8.
Tailwind margin is simple and straightforward.
To add a margin to an element, simply add tailwind margin class to the element’s HTML tag.
The example below demonstrates some Tailwind margin classes explained above:
Tailwind Margin Example: 1
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold mt-4">Margin Class in Tailwind CSS</p>
<div class="my-2 bg-gray-200 flex font-medium rounded">
<div class="m-4 border-2
bg-gray-400 w-16 h-16">
m-4
</div>
<div class="m-8 border-2
bg-gray-400 w-16 h-16">
m-6
</div>
<div class="m-12 border-2
bg-gray-400 w-16 h-16">
m-10
</div>
<div class="m-16 border-2
bg-gray-400 w-16 h-16">
m-12
</div>
</div>
</body>
</html>
In below example, we have illustrated the working of more Tailwind margin classes:
Tailwind Margin Example: 2
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold mt-4">Margin Class in Tailwind CSS</p>
<div class="my-2 bg-gray-200 font-medium rounded p-2 w-1/2 mx-auto">
<div class="m-0 border-2
bg-gray-400 w-16 h-16">
m-0
</div>
<div class="mt-8 border-2
bg-gray-400 w-16 h-16">
mt-8
</div>
<div class="ml-10 border-2
bg-gray-400 w-16 h-16">
ml-10
</div>
<div class="my-4 border-2
bg-gray-400 w-16 h-16">
my-4
</div>
<div class="mx-6 border-2
bg-gray-400 w-16 h-16">
mx-6
</div>
</div>
</body>
</html>
For this example, let’s consider the usage of some additional tailwind margin property classes:
Tailwind Margin Example: 3
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold mt-4">Margin Class in Tailwind CSS</p>
<div class="my-2 bg-gray-200 flex flex-col items-end font-medium rounded p-2 w-1/2 mx-auto">
<div class="mx-auto border-2
bg-gray-400 w-16 h-16">
mx-auto
</div>
<div class="mr-8 border-2
bg-gray-400 w-16 h-16">
mr-8
</div>
<div class="m-5 border-2
bg-gray-400 w-16 h-16">
m-5
</div>
<div class="mx-2 border-2
bg-gray-400 w-16 h-16">
mx-2
</div>
<div class="mb-10 border-2
bg-gray-400 w-16 h-16">
mb-10
</div>
</div>
</body>
</html>
Conclusion
Tailwind margin is a powerful and flexible feature that allows you to quickly and easily add space around the elements.
Whether you are creating a simple website or a complex web application, Tailwind margin can help you create effective layouts and designs.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
