Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) The Box Model Margins

Posted by Sidney Villanueva
.a{fill-rule:evenodd;}techdegree
Sidney Villanueva
Ubora | Web Development Techdegree Student 1,893 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
6,548 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
7,242 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
229,670 Points
Steven Parker
Steven Parker
229,670 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.