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) Basic Layout box-sizing and max-width

Posted by Alina Gavrila
Alina Gavrila
Courses Plus Student 2,490 Points

Where does the <h1> margin come from?

Hello,

If we open "box-sizing and max-width" lesson's workplace, then open a workplace preview and select h1 with the element inspector we will see that h1 has a top & bottom margins (60.3px) that are defined in "user agent stylesheet" as: -webkit-margin-before: 0.67em; -webkit-margin-after: 0.67em;.

Where does they come from? I can't find any margin declarations in the CSS. h3 & p.intro also have margins applied on them... but there is no CSS declaration for them also.

Is it something to do with the line-height property? When I set it to "0" margins are still applied.

1 Answer

Marc Schultz
Marc Schultz
23,356 Points
Marc Schultz
Marc Schultz
23,356 Points

All HTML elements got predefined CSS properties applied by the browsers. That's why you use for example h1 and not div, because you know that h1 sizes the text like a headline. Inside the body tag you could just use div tags instead of all the other specific HTML elements. But that would require you to specify all the CSS explicitly for all of your div-tags.

The predefined CSS properties vary with each browser, so you should have a look at normalize.css.