Tailwind CSS Margin
Margin is used to create space around an element, Outside
of any defined borders.
Utilities for controlling an element's Margin.
Class
Properties
-
m-0
This class is used to define the margin on all sides.
-
-m-0
This class is used to define the negative margin on all the sides.
-
my-0
This class is used to define margin on the y-axis i.e margin-top and margin-bottom.
-
-my-0
This class is used to define negative margin on the y-axis i.e margin-top and margin-bottom.
-
mx-0
This class is used to define margin on the x-axis i.e margin-left and margin-right.
-
-mx-0
This class is used to define negative margin on the x-axis i.e margin-left and margin-right.
-
mt-0
This class is specially used to add a margin on top.
-
-mt-0
This class is specially used to add a negative margin on top.
-
mr-0
This class is specially used to add a margin on Right.
-
-mr-0
This class is specially used to add a negative margin on Right.
-
mb-0
This class is specially used to add a margin on Bottom.
-
-mb-0
This class is specially used to add a negative margin on Bottom.
-
ml-0
This class is specially used to add a margin on Left.
-
-ml-0
This class is specially used to add a negative margin on Left.
Tailwind css Margin
This class is used to define the Margin on all sides.
This class is used to define the Margin on all sides. For ex. This parent Div is containing class ( m-10 ) This class is provide 40px of Margin form all sides.
<div class="border-2 border-indigo-600 w-full h-auto p-6 m-10 rounded-lg">
<p class="text-lg font-medium text-gray-900 text-justify">
This class is used to define the Margin on all sides. For ex. This
parent Div is containing class <span
class="whitespace-nowrap text-indigo-600 font-bold text-xl">(
m-10)</span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span>
of Margin form all sides.</p>
</div>Tailwind css Margin on the y-axis
This class defines Margin on the y-axis (margin-top and margin-bottom).
This class is used to define the margin on Tob and Bottom sides. For ex. This parent Div is containing class ( my-10 ) This class is provide 40px of margin form Y-axis (margin-top and margin-bottom).
<div class="border-2 border-indigo-600 w-full h-auto p-6 my-10 rounded-lg">
<p class="text-lg font-medium text-gray-900 text-justify">
This class is used to define the margin on Tob and Bottom sides.
For ex. This
parent Div is containing class <span
class="whitespace-nowrap text-indigo-600 font-bold text-xl">(
my-10 )</span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span>
of margin form Y-axis (margin-top and margin-bottom).</p>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Tailwind css Margin on the x-axis
This class defines Margin on the y-axis (Margin-left and Margin-right).
This class is used to define the Margin on Left and Right sides. For ex. This parent Div is containing class ( mx-10 ) This class is provide 40px of Margin form x-axis (Margin-left and Margin-right).
<div class="border-2 border-indigo-600 w-full h-auto p-6 mx-10 rounded-lg">
<p class="text-lg font-medium text-gray-900 text-justify">
This class is used to define the Margin on Left and Right sides.
For ex. This
parent Div is containing class <span
class="whitespace-nowrap text-indigo-600 font-bold text-xl">(
mx-10 )</span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span>
of Margin form x-axis (Margin-left and Margin-right).</p>
</div>Tailwind css Margin on the Top
This class defines Margin on the top (Margin-top).
This class is used to define the Margin on Top sides. For ex. This parent Div is containing class ( mt-10 ) This class is provide 40px of Margin form Top (Margin-top).
<div class="border-2 border-indigo-600 w-full h-auto mt-10 p-6 rounded-lg">
<p class="text-lg font-medium text-gray-900 text-justify">
This class is used to define the Margin on Top sides. For ex. This
parent Div is containing class <span class="whitespace-nowrap text-indigo-600 font-bold text-xl">(
mt-10 )</span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span>
of Margin form Top (Margin-top).</p>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Tailwind css Margin on the Right
This class defines Margin on the Right (Margin-right).
This class is used to define the Margin on Right sides. For ex. This parent Div is containing class ( mr-10) This class is provide 40px of Margin form Right (Margin-right).
<div class="border-2 border-indigo-600 w-full h-auto p-6 mr-10 rounded-lg">
<p class="text-lg font-medium text-gray-900 text-justify">
This class is used to define the Margin on Right sides. For ex.
This
parent Div is containing class <span class="whitespace-nowrap text-indigo-600 font-bold text-xl">(
mr-10)</span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span>
of Margin form Right (Margin-right).</p>
</div>Tailwind css Margin on the Bottom
This class defines Margin on the Bottom (Margin-bottom).
This class is used to define the Margin on Bottom sides. For ex. This parent Div is containing class ( mb-10 ) This class is provide 40px of Margin form Bottom (Margin-bottom).
<div class="border-2 border-indigo-600 w-full h-auto p-6 mb-10 rounded-lg">
<p class="text-lg font-medium text-gray-900 text-justify">
This class is used to define the Margin on Bottom sides. For ex.
This
parent Div is containing class <span class="whitespace-nowrap text-indigo-600 font-bold text-xl">(
mb-10 )</span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span>
of Margin form Bottom (Margin-bottom).</p>
</div>Tailwind css Margin on the Left
This class defines Margin on the Left (Margin-left).
This class is used to define the Margin on Left sides. For ex. This parent Div is containing class ( ml-10 ) This class is provide 40px of Margin form Left (Margin-left).
<div class="border-2 border-indigo-600 w-full h-auto p-6 ml-10 rounded-lg">
<p class="text-lg font-medium text-gray-900 text-justify">
This class is used to define the Margin on Left sides. For ex. This
parent Div is containing class <span class="whitespace-nowrap text-indigo-600 font-bold text-xl">(
ml-10 )</span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span>
of Margin form Left (Margin-left).</p>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More