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

Jacqueline Sadberry
Jacqueline Sadberry
897 Points

What formula is being used to figure out the correct number of pixels/ems?

I've been trying to figure it out since the previous video, but how do you know that 80px is 4ems?

Is it something like: 400% divided by 100% equals 4, times 20px equals 80px...and the equivalent is the remainder from when you divide the % by 100? (So 4em?)

I feel like I'm making it way more complicated than it should be.

1 Answer

Brian Jensen
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Brian Jensen
Treehouse Teacher

Great question Jacqueline Sadberry!

You're on the right track with your thinking! The core thing to remember is that 1em = the parent element's font size.

In the example from the video, the body elements font size was set to 20px, and the h1 was meant to be 80px. So, the formula would be 80 ÷ 20 = 4 which is where the 4em comes from.

The cumulative effect that can happen with nested elements when using em, makes my brain hurt haha. :exploding_head: Personally I only use rem for my font sizes to keep things simple and uniform.