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) The Box Model Margins

kabir k
PLUS
kabir k
Courses Plus Student 18,036 Points
Posted by kabir k
kabir k
Courses Plus Student 18,036 Points

For h2 styling, the margin-bottom, 26px/53px in the stylesheet. Where is the 26px from?

In the CSS Basics - The Box Model - Margins section, Guil said he was going to divide 26px by 53px for h2 styling, margin-bottom, 0.5em, 26px/53px in the stylesheet.

Where is the 26px from? And why are we using the em unit on the h2's margin-bottom instead of px?

Here is the code:

h2 {
  font-size: 3.3125em; /* 53px/16px  */
  font-weight: normal;
  line-height: 1.1;
  margin-bottom: 0.5em /* 26px/53px */
}

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I think what Guil is doing is using a method to define a certain amount of space from the h2 element and the elements below it.

If you were to divide 26 from 53 you'd get, 2.03846154.

Try putting this value in as a percentage,

kabir k
kabir k
Courses Plus Student 18,036 Points
kabir k
kabir k
Courses Plus Student 18,036 Points

Sorry, I made a mistake. It's the other way round. I have edited my question.

Matteo Simeone
Matteo Simeone
13,587 Points
Matteo Simeone
Matteo Simeone
13,587 Points

Hi kabir, 26px is the bottom margin Guil is going to define for the h2 element. He is using em unit to be coerent with the font-size property, which is defined in em unit too.

Burton King
Burton King
3,938 Points
Burton King
Burton King
3,938 Points

Where did the 53px come from? I seem him state it's from the parent element but I can't seem to find where that's defined or is that just the browser default for H2?