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 Layout Techniques Display Modes Block vs. Inline Elements

Kevin Murphy
Kevin Murphy
24,380 Points
Posted by Kevin Murphy
Kevin Murphy
24,380 Points

Block elements and margin collapse

Working through Stage 1 of CSS Layout Techniques. at approx 4 min in Guil mentions that the h1 has a top margin of 24px. I can see this as well upon element inspection...

Where in the heck is this 24px top (and bottom) margin coming from? It's not in the normalize or style css files...

I recognize 24px is 1.5em for a 16px default font. The only 1.5em setting is for line height, removing that adjusts the h1 margin to about 21px so it has some factor but not much. Any thoughts?

1 Answer

Kevin Murphy
Kevin Murphy
24,380 Points
Kevin Murphy
Kevin Murphy
24,380 Points

Ok seem Guil just answered this in the stage entitled "Inline Block Formatting". He points out that heading elements (i.e. h1, h2, h3, etc) have by default a top and bottom margin applied that is not reset by the normalize. css file.