CSS CSS Basics The Box Model Margins

Sidney Villanueva
Sidney Villanueva
Front End Web Development Techdegree Student 1,873 Points

what's the purpose of using negative values in margin?

I am a bit confused about using negative values. I do not see any use for it. Please enlighten me.

Alan Hajo
Alan Hajo
1,907 Points

Negative margins can be useful for overlaps. See the image:

Overlap

Read more here: https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/

Brad Meraly
Brad Meraly
4,178 Points

An example where I’ve used it - In mobile view, I stacked two elements one on top of the other. The top on is a user’s profile image like their avatar and the second is text, their social media links. I made the profile image centred and rounded using border-radius. Then used a negative margin to push it down to overly slightly into the social links area. Makes for a nice effect by simply using a negative margin. The profile image is connected with their profile information.

1 Answer

Steven Parker
Steven Parker
201,355 Points

Margins are normally used to add more space between an element and those next to it.

A negative margin causes less space between the elements,, and it can potentially cause the elements to connect or overlap.

But using negative margins would not be good practice for an effect that can also be done with a more clearly understood technique. Modern layout techniques such as flexbox and grids should make it extremely rare for negative margins to be needed.