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

Posted by Riksha Karma
Riksha Karma
886 Points

Margin confusion

body { color: #878787; margin: 0; font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }

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

here, why should we divide margin-bottom 24px by font-size 53px since h2 parent is body so I think shouldn't margin-bottom 24px divide by font 16px ? Thanks in advanced :)

2 Answers

Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points
Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points

em - Relative to the font-size of the element (2em means 2 times the size of the current font)

When you put em's on margins it will use it's own font-size to measure.

nicolebell
nicolebell
1,214 Points
nicolebell
nicolebell
1,214 Points

It looks to be in a div container. Possibly why. It is also has the wildlife class. So it appears to separate the two. It puts it in its own box. Also, the size is relative, 1 (rem) is 16px. Ems irritate me.