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

Posted by Johanna Svensson
Johanna Svensson
1,998 Points

Why does he define em as always based on THE PARENTS font-size?

From what I understand, if the element itself has a font-size defined, it will be relative to the font-size of itself (and not its parent). Or have I misunderstood it? Please let me know, I want to be sure how it is used.

Reggie Williams
Reggie Williams
Treehouse Teacher
Reggie Williams
Reggie Williams
Treehouse Teacher

Hey Johanna Svensson em units are always calculated based on the parent elements font size. Elements are only able to have one font size so if the font size is defined in px you wouldn't need to also use ems

Johanna Svensson
Johanna Svensson
1,998 Points

That's not what I mean. I mean for example if one element has font-size: 24px; and margin: 2em;, it means margin is 2*24 = 28px? Maybe it's parent has font-size: 50px. You mean that the element then will have margin 2*50 = 100px?

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

You are correct that if you hard-code a font-size such as 24px any em units after that will inherit that font-size. This would be a pretty weird use-case, though.

Generally if you're working with em units for styling, you won't use px units in the same instance in that way very often. Typically I only use px when I need to define a specific static thing more precisely - such as a border that I do not want to scale.

Your example is accurate - apart from some possible math errors. I was using this workspace to demonstrate something related, so I've updated this snapshot to have a demo of the situation you're talking about. 

/* parent has inherited calculated font-size of 20px */
#em {
  font-size: 8px; /* overrides inherited em size */
  padding: 2em; /* now working off hard-coded 8px (16px) */
}

Basically, it sounds like you understand the concept; practice and experience will help you determine best-practices for your projects.

Let me know if that still isn't covering everything you've got questions about, I'm happy to chat more. Happy coding!

Update:

Okay, so after experimenting a little bit I have one addition regarding my personal opinions on this. I mostly dislike working with either of these units. I find px too restrictive and not responsive and I find em often compounds in weird ways that I'm not expecting unless I'm really careful about tracing my cascades.

I much prefer working with rem most of the time, which works from a root-em value that is static. You'll run into this unit a bit later and I find it much more intuitive to work with. Your mileage may vary - but if you're not really feeling these units, know that other options will open up later down the line.