Open In App

Tailwind CSS Margin

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This class accepts lots of values in tailwind CSS in which all the properties are covered as in the class form. It is the alternative to the CSS Margin Property. This class is used to create space around the element, outside any defined border. We can set different margins for individual sides(top, right, bottom, left). It is important to add border properties to implement margin classes. There are lots of CSS properties used for margin like CSS padding-top, CSS padding-bottom, CSS padding-right, CSS padding-left, etc.

Margin Classes:

  • 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 add a negative margin on 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 the bottom.
  • -mb-0: This class is specially used to add a negative margin on the 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.

Note: You can change the number “0” with the valid “rem” values.

m-0: This class is used to define the margin on all sides.

Syntax:

<element class="m-0">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Margin Class</b
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="m-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body
  
</html>


Output:

-m-0: This class is used to define the negative margin on all the sides.

Syntax:

<element class="-m-0">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Margin Class</b
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="-m-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body
  
</html>


Output:

my-0: This class Is used to define margin on the y-axis i.e margin-top and margin-bottom.

Syntax:

<element class="my-0">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Margin Class</b
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="my-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body
  
</html>


Output:

-my-0: This class is used to define negative margin on the y-axis i.e margin-top and margin-bottom.

Syntax:

<element class="-my-0">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Margin Class</b
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="-my-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body
  
</html>


Output:

mx-0: This class is used to define margin on the x-axis i.e margin-left and margin-right.

Syntax:

<element class="mx-0">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Margin Class</b
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="mx-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body
  
</html>


Output:

-mx-0: This class is used to define negative margin on the x-axis i.e margin-left and margin-right.

Syntax:

<element class="-mx-0">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Margin Class</b
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="-mx-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body
  
</html>


Output:

mt-0: This class is specially used to add a margin on top.

Syntax:

<element class="mt-0">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Margin Class</b
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="mt-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body
  
</html>


Output:

-mt-0: This class is specially used to add a negative margin on top.

Syntax:

<element class="-mt-0">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Margin Class</b
    <div class="flex justify-center">
    <div class="m-8 bg-green-300 w-24 h-24">
        <div class="-mt-4 border-2 border-green-800 
                    bg-green-600 w-16 h-16">
              
        </div>
    </div>
    </div>
</body
  
</html>


Output:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads