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
Vamsi Pavan Mahesh Gunturu
4,541 PointsHow to get rid of vertical margin collapse
I have tried and this, and reproduced the vertical margin collapse. Now I want margin for both the top and bottom element. How can achieve it? Where to add the padding to? https://jsfiddle.net/gvpmahesh/xb2rdt6e/
Kevin Korte
28,148 PointsHis margins are collapsed Jake, if you look, the top element has bottom margin of 10px, and the bottom element has a top margin of 20px. You'd expect 30px of margin, but the 10px gets asorbed in the 20px so he still has only 20px of margin.
2 Answers
Kevin Korte
28,148 PointsYou can't fix collapsing vertical margins, because it's not borken. There isn't a hack for it like a clearfix for collapsing parents with floated children.
You can only manage your vertical margins. It seems unintuitive at first, but collapsing vertical margins actually have a purpose, especially when it comes to typography.
The most common is that typically headings and paragraphs have margin. You would end up with unnecessarily large margins when headings followed paragraphs, or vice versa, and you'd end up having to individually reset vertical margins on some headings and paragraphs to still achieve consistent vertical spacing if vertical margins did not collapse.
It's also helpful when you are nesting elements that may have vertical margins. You're not having to tediously set margins individually, when nesting it's the biggest vertical margin wins.
When you wrap your head around it, collapsing vertical margins make sense, and cause fewer problems than they create.
Unexpected collapsing vertical margins are generally avoided by being consistent on what side gets the vertical margin, whether it's the top margin or bottom margin. That will help keep it from collapsing when you don't want it to.
Jake Lundberg
13,965 PointsOh I see what you are saying, sorry misunderstood. This is actually normal per the W3C...
Two margins are adjoining if and only if:
both belong to in-flow block-level boxes that participate in the same block formatting context
no line boxes, no clearance, no padding and no border separate them
both belong to vertically-adjacent box edges
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
If you would like to prevent the collapse, you can use one of the following, depending on what you are trying to do:
float: left / right
position: absolute
display: inline-block
but as Kevin mentioned above, it is better practice to be consistent with your distribution of margins on your elements...ie. if you want a 30px gap between these two elements, you should specify a bottom margin of 30px on the top element (or more ideally, on all the these divs, in case you add more later...)
Hope this helps!
Vamsi Pavan Mahesh Gunturu
4,541 PointsThanks man after adding the position as inline-block, It seemed the distance increased. But how to view it in developer tools? I mean the white space should have 30 px height right?
Jake Lundberg
13,965 PointsJake Lundberg
13,965 PointsYou already have margins on both the top and bottom elements, what exactly are you trying to do?