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
saber
13,276 Pointsh3 Margin rule question
I had a weird problem occur during this video. For some reason, about 15px of whitespace was being added above the header on the contact page. I finally figured out it was because I was missing the h3 style rule
h3 {
margin: 0 0 1em 0;
}
What I don't understand... is why not including this margin rule would cause white space to appear above the header? It's almost as if the h3 element is pulling the header down. Anyone know? Thanks.
1 Answer
Chris Shaw
26,676 PointsHi Brock,
By default a margin isn't contained meaning it's allowed to flow outside the normal bounds of a container unless you explicitly contain it through an overflow, in typical circumstance we wouldn't remove the top margin from a heading tag but in this case we remove it because we're spacing the elements other using other means.
If for any reason you do want to contain this margin you can use the below example which clips the edges of the parent container causing the margin to be contained within it's parent rather than outside of it.
#a-parent-element {
overflow: hidden;
}
This is more of a hack but it can be useful at times if you don't need to worry about clipping.
Hope that helps.
saber
13,276 Pointssaber
13,276 PointsI'm always wary of screwing with overflows.
That said, the white space is appearing above the header which is not contained by anything. I can understand the default margin of the h3 flowing into the parent wrapper div...but that should have pushed the wrapper div down....and therefore creating white space between the header and the wrapper div. It doesn't make sense to me that it would push the header down by adding white space above that.