Tailwind CSS Margin

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:

Output:

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

Syntax:

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

Example:

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:

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:

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:

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:

Output:

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

Syntax:

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

Example:

Output:

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

Syntax:

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

Example:

Output: