CSS CSS Basics The Box Model Margins

kabir k
PRO
kabir k
Pro 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 85,148 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
Pro Student 18,036 Points

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

Matteo Simeone
Matteo Simeone
12,935 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.

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?