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 Johnny Garces
Johnny Garces
Courses Plus Student 8,551 Points

Making sense of 'ems' with width, margin, and padding.

I seem to have a grasp on how ems affect font-sizes. The idea is that font-sizes that use ems are relative to the font-size of the direct parent element, hence the compounding effect seen.

How does this logic extend to margin, width, and padding when using ems? Is it even a good practice to use ems when declaring width sizes, and margin/padding?

Any example on codepen/jsfiddle will go a long way in making sense of this. Thanks!

1 Answer

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Hi Johnny! I believe using ems in paddings and margins could be possible but I find it a little annoying when it comes to width...there I prefer to use something like pixels or other relatives like "%" for responsiveness. I found this article about em's that seems nice for reading about that topic: http://www.impressivewebs.com/understanding-em-units-css/

Hope you find this answer helpful!

Cheers and Keep Coding!

Johnny Garces
Johnny Garces
Courses Plus Student 8,551 Points

thanks for sharing the article- though it didn't get to the heart of why we should use "ems" to style layouts in the first place. I understand why you would use "ems" (rather 'rems') with font-sizes as it would save you the trouble of changing font-styles for hundreds of elements if they're in pixels.

Any other reasons out there? Thanks!