Negative margin usage in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does a negative margin do in CSS or Tailwind?

A negative margin pulls an element closer to its neighbors or even overlaps them by moving it outside its normal space.

beginner

How do you write a negative margin of 4 units on the top in Tailwind?

Use -mt-4. The - before mt means negative margin top.

intermediate

Why might you use a negative margin in a layout?

To adjust spacing when normal margins create too much space, or to create overlapping effects for design.

beginner

What is the Tailwind class for negative horizontal margin of 2 units?

Use -mx-2. It applies negative margin on both left and right sides.

intermediate

Can negative margins cause accessibility or usability issues?

Yes, if used carelessly, they can overlap content making it hard to read or interact with, so use them carefully and test.

Which Tailwind class applies a negative bottom margin of 6 units?

A -mb-6

B mb-6

C -mt-6

D pb-6

The class -mb-6 means negative margin bottom of 6 units.

What happens visually when you apply a negative margin to an element?

A The element moves down only

B The element gets bigger

C The element disappears

D The element moves closer or overlaps neighbors

Negative margin pulls the element closer to others or overlaps them.

Which Tailwind class applies negative margin on both left and right sides?

A -mx-4

B -my-4

C -mt-4

D -ml-4

-mx-4 applies negative margin horizontally (left and right).

Why should you be careful when using negative margins?

A They disable links

B They slow down the website

C They can cause overlapping that hurts readability

D They remove images

Negative margins can overlap content making it hard to read or use.

How do you write a negative margin of 8 units on the left side in Tailwind?

A ml-8

B -ml-8

C -mr-8

D pl-8

-ml-8 means negative margin left of 8 units.

Explain what negative margins do and give an example of when you might use them in a web page layout.

Think about how elements can move closer or overlap.

Describe how to write negative margin classes in Tailwind CSS and what the prefixes mean.

Look at how Tailwind names margin classes.