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 Basics Getting Started with CSS Layout Why Vertical Margins Collapse

Posted by jlampstack
jlampstack
23,932 Points

Why would normalize add a margin to h1 in the first place?

It appears that if no margin were added to the h1 in normalize, that collapsing margins would never be a problem in the first place?

I'm still getting the hang of this so any feedback is appreciated!

2 Answers

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

I understand browser inconsistencies. What I was trying to say was why not set the margin to 0 in the normalize.css file to prevent collapsing margins, But in hindsight I see that may throw off spacing in other areas.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi jaycode,

The margin is added in normalize.css to help smooth out browser inconsistencies. Each browser developer decides on a set of default styles to give each element in case you don't set any styles yourself in your own custom stylesheet.

Understandably, not all the browsers agree on the same values. The reason something would be included in the normalize file is to account for these differences and make sure it's the same for everybody.

So if the margin wasn't set in the normalize file then you would still have whatever margin was the default value and you would still get the margin collapsing. It would just be potentially different margin values in each browser.