Margin utilities in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Tailwind CSS class m-4 do?

It adds a margin of 1rem (16px by default) on all four sides of an element.

beginner

How do you apply margin only to the top side of an element in Tailwind CSS?

Use the class mt-{size}, for example mt-2 adds margin-top of 0.5rem.

beginner

What is the difference between mx-3 and my-3 in Tailwind CSS?

mx-3 adds horizontal margin (left and right), while my-3 adds vertical margin (top and bottom).

beginner

How can you remove margin from an element using Tailwind CSS?

Use m-0 to remove all margins or mt-0, mr-0, mb-0, ml-0 to remove margin from specific sides.

intermediate

What does a negative margin class like <code>-m-2</code> do in Tailwind CSS?

It applies a negative margin of 0.5rem, pulling the element closer or overlapping adjacent elements.

Which Tailwind class adds margin only to the left side of an element?

A ml-4

B mr-4

C mx-4

D m-4

ml-4 adds margin-left only. mr-4 is right, mx-4 is horizontal both sides, m-4 is all sides.

What does my-6 do in Tailwind CSS?

A Adds margin top and bottom of 1.5rem

B Adds margin left and right of 1.5rem

C Adds margin on all sides of 1.5rem

D Removes margin top and bottom

my-6 adds vertical margin (top and bottom) of 1.5rem.

How do you apply a negative margin on the right side in Tailwind CSS?

A negative-mr-3

B -mr-3

C m-r-3

D mr--3

Negative margins use a dash before the class: -mr-3.

Which class removes all margin from an element?

A m-none

B m-clear

C m-remove

D m-0

m-0 sets margin to zero on all sides.

If you want to add margin only on the bottom side, which class should you use?

A mx-5

B mt-5

C mb-5

D my-5

mb-5 adds margin-bottom only.

Explain how to use Tailwind CSS margin utilities to add space around an element on specific sides.

Think about how you add margin in CSS but with Tailwind's short classes.

Describe how negative margins work in Tailwind CSS and when you might use them.

Negative margins are like moving the element outside its normal space.