Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Margin

Quiz

Margin is an important property that is used to create outer space on any element. The CSS margin properties can be replaced by the Tailwind CSS margin classes.

Tailwind CSS Margin Classes

Below mentioned classes can be used to control the margin of an element.

Class	Description
m-*	This class with a valid value like m-0, m-0.5, m-1, m-1.5, etc., can be used to add margin.
my-*	This class with a valid value like my-0, my-0.5, my-1, my-1.5, etc., can be used to add vertical margin.
mx-*	This class with a valid value like mx-0, mx-0.5, mx-1, mx-1.5, etc., can be used to add horizontal margin.
mt-*	This class with a valid value like mt-0, mt-0.5, mt-1, mt-1.5, etc., can be used to add margin top.
mr-*	This class with a valid value like mr-0, mr-0.5, mr-1, mr-1.5, etc., can be used to add margin right.
mb-*	This class with a valid value like mb-0, mb-0.5, mb-1, mb-1.5, etc., can be used to add margin bottom.
ml-*	This class with a valid value like ml-0, ml-0.5, ml-1, ml-1.5, etc., can be used to add margin left.
ms-*	This class with a valid value like ms-0, ms-0.5, ms-1, ms-1.5, etc., can be used to add margin inline start.
me-*	This class with a valid value like me-0, me-0.5, me-1, me-1.5, etc., can be used to add margin inline end.

Note: The * (astrick) can have the value from 0 to any valid acceptable number.

Tailwind CSS Margin Classes Examples

In the below examples, we see the use cases of a few above-mentioned classes. You can try different values on your own by changing the code.

Add Margin to All Sides

Here in this article, we will create margins on all sides of each element with different values using the tailwind CSS 'm-**' class.

Example

<!DOCTYPE html>
<html>
<head>
    <!-- Tailwind CSS CDN Link -->
    <script src="https://cdn.tailwindcss.com?plugins=aspect-ratio"></script>
</head>

<body>
    <div class="m-5">
        <p class="text-3xl font-bold">
            Tailwind CSS Margin
        </p>
        <p>
            The light green section of the below
            squares is the margin area.
        </p>
        <div class="text-center">
            <!-- Tailwind CSS Margin Class is Used on Child div-->
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="m-0 bg-green-600 
                            w-16 h-16">m-0</div>
            </div>
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="m-1 bg-green-600 
                            w-16 h-16">m-1</div>
            </div>
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="m-2 bg-green-600 
                            w-16 h-16">m-2</div>
            </div>
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="m-4 bg-green-600 
                            w-16 h-16">m-4</div>
            </div>
        </div>
</body>

</html>

Add Margin to Single Sides

In the following example, we have used four different classes like 'mt-*', 'mr-*', 'mb-*', and 'ml-*' to set the margin on four different elements's individual sides.

Example

<!DOCTYPE html>
<html>
<head>
    <!-- Tailwind CSS CDN Link -->
    <script src="https://cdn.tailwindcss.com?plugins=aspect-ratio"></script>
</head>

<body>
    <div class="m-5">
        <p class="text-3xl font-bold">
            Tailwind CSS Margin
        </p>
        <p>
            The light green section of the below
            squares is the margin area.
        </p>
        <div class="text-center">
            <!-- Tailwind CSS Margin Class is Used on Child div -->
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="mt-4 bg-green-600 
                            w-16 h-16">mt-4</div>
            </div>
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="mr-4 bg-green-600 
                            w-16 h-16">mr-4</div>
            </div>
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="mb-4 bg-green-600 
                            w-16 h-16">mb-4</div>
            </div>
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="ml-4 bg-green-600 
                            w-16 h-16">ml-4</div>
            </div>
        </div>
</body>

</html>

X Axis Margin

Here in this example we will use the 'mx-*' class, with different values for different elements.

Example

<!DOCTYPE html>
<html>
<head>
    <!-- Tailwind CSS CDN Link -->
    <script src="https://cdn.tailwindcss.com?plugins=aspect-ratio"></script>
</head>

<body>
    <div class="m-5">
        <p class="text-3xl font-bold">
            Tailwind CSS Margin
        </p>
        <p>
            The light green section of the below
            squares is the margin area.
        </p>
        <div class="text-center">
            <!-- Tailwind CSS Margin Class is Used on Child div -->
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="mx-4 bg-green-600 
                            w-16 h-16">mx-4</div>
            </div>
        </div>
</body>

</html>

Y Axis Margin

Here in this example we will use the 'my-*' class, with different values for different elements.

Example

<!DOCTYPE html>
<html>

<head>
    <!-- Tailwind CSS CDN Link -->
    <script src="https://cdn.tailwindcss.com?plugins=aspect-ratio"></script>
</head>

<body>
    <div class="m-5">
        <p class="text-3xl font-bold">
            Tailwind CSS Margin
        </p>
        <p>
            The light green section of the below
            squares is the margin area.
        </p>
        <div class="text-center">
            <!-- Tailwind CSS Margin Class is Used on Child div -->
            <div class="m-2 border 
                        border-green-600 
                        bg-green-200 w-max">
                <div class="y-4 bg-green-600 
                            w-16 h-16">my-4</div>
            </div>
        </div>
</body>

</html>

Logical Margin

In the following example, we are setting margin depending on the content direction by using 'ms-*', and 'me-*' classes.

Example

<!DOCTYPE html>
<html>
<head>
    <!-- Tailwind CSS CDN Link -->
    <script src="https://cdn.tailwindcss.com?plugins=aspect-ratio">   </script>
</head>

<body>
    <div class="m-5">
        <p class="text-3xl font-bold">
            Tailwind CSS Margin
        </p>
        <p>
            The light green section of the below
            squares is the margin area.
        </p>
        <div class="text-center" dir="ltr">
            <!-- Tailwind CSS Margin Class is Used on Child div -->
            <div class="m-2 border border-green-600 
                        bg-green-200 w-max">
                <div class="ms-4 bg-green-600 w-16 h-16">ms-4</div>
            </div>
            <div class="m-2 border border-green-600 
                        bg-green-200 w-max">
                <div class="me-4 bg-green-600 w-16 h-16">me-4</div>
            </div>
        </div>
        <div class="text-center" dir="rtl">
            <!-- Tailwind CSS Margin Class is Used on Child div -->
            <div class="m-2 border border-green-600 
                        bg-green-200 w-max">
                <div class="ms-4 bg-green-600 w-16 h-16">ms-4</div>
            </div>
            <div class="m-2 border border-green-600 
                        bg-green-200 w-max">
                <div class="me-4 bg-green-600 w-16 h-16">me-4</div>
            </div>
        </div>
</body>

</html>

Print Page