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 Ubo Town
Ubo Town
3,227 Points

compounding effect

i could not understand his explanation. He starts explaining at the end, 5:50min, that's the chunk that I could not understand. can somebody have mercy on me and explain with clear examples? tks!

1 Answer

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

I have less experience working with em since I mostly fall on the rem side of the fence when writing CSS, but I'll give it a shot.

em is relative to the font size of it's direct or nearest parent element. So this value is calculated working backwards through the element tree. Let's take a look at a simpler example than the one in the video.

<body> <!-- 5px -->
  <div> <!-- 10px (5*2) -->
    <div> <!-- 20px (10*2) -->
    </div>
  </div>
</body>

body { font-size: 5px; } /* base font-size */
div { font-size: 2em; } /* compounding font-size */

This mostly comes up when you have several nested elements that are inheriting a calculated value from their parent element, which then multiplies it again. So if you're using em and end up with sizes you weren't expecting, you should try tracing back the element's tree to find what values may be compounding it.

I've mocked up a basic demo of this that you can play around with HERE. You just need to fork the snapshot to save a version for yourself.

Later in the CSS courses you'll learn about rem units. rem works from a root em value, which eliminates compounding calculated sizes. I wouldn't worry about it too much now, but you may find that easier to work with later on. It's mostly a personal preference, and you may switch which one you use based on the project or even the element.

In any case, let me know if that's still confusing or if you have any follow up questions. Good luck, and happy coding!