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

Posted by marvelousperson206
marvelousperson206
9,199 Points

Why do Ems compound?

When I Google the question I get a few articles that talk about the fact that they do compound, and how this an annoying/unfortunate aspect of using them. So what scenarios might I actually want this to happen?? I've just been sticking with Rems for font sizes to save myself any headaches over it, and I've never had any problems with them.

2 Answers

Sara Chicazul
Sara Chicazul
7,475 Points

Ems compound because the number of ems is a multiplication factor for the current font size. So a value of 2em means "current font size times 2" and a value of 0.7em means "0.7 times current font size". If you nest elements with these attributes you'll get "current font size times 2, times 0.7" which ends up as 1.4, or 140% of the starting font size.

This is useful for making sure that font sizes maintain a relationship to each other, but compounding is a side-effect of complicated nesting of elements and rarely done on purpose.

The best example I can think of: imagine you have a lot of different font sizes on your website and you want to be able to use the fineprint class to make a section of text half as big as the text around it. If you use ems you don't need to worry what size the original text was, or do complicated selectors for if the fine print is in a paragraph, div, heading, list, etc. font-size: 0.5em will always be half the size of the text around it.

The main reason for using ems though is that rem is very new, and only started being widely supported in browsers as of 2015. (:

marvelousperson206
marvelousperson206
9,199 Points
marvelousperson206
marvelousperson206
9,199 Points

Thanks for that you explained it well, thats actually a good example. I can see how some people would use that reguarly. Might have to remember that for the future :)