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) Understanding Values and Units Em Units

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points

How do you classify what the em value should be relative to?

I noticed that when Guil changed the main-header font size from 1em to 2em, the font across the entire site was larger (which I get the multiplying effect). However, how did the browser determine what to base the font size off of? In other words, why was everything based off the base size of main-header rather than, say, the em size of the font in the body tag? Are em sizes always relative to main-header (gut is telling me no), and if not, how do you specify?

2 Answers

MIke Legemah
seal-mask
.a{fill-rule:evenodd;}techdegree
MIke Legemah
Front End Web Development Techdegree Student 13,732 Points

Hi, usually the base font size is set in the body selector...

body{
    font-size: 16px;
}

That is usually the base font size for ems 1em usually equals 16px

Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

That makes sense to me, but he mentioned that it was set relative to "main-content", not body. So I'm wondering if that was a mistake, or if there's some way of telling the browser which element to base it off of. Thanks, Mike!

MIke Legemah
seal-mask
.a{fill-rule:evenodd;}techdegree
MIke Legemah
Front End Web Development Techdegree Student 13,732 Points

You're welcome Gina They're both correct, since ems are relative units, which means they're relative to their parent element's declaration, so instead of body, use .main-content or whatever element you want.