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

Ems vs. Pixels on Margin and Padding

In my layout, I stuck with ems instead of px to define margin and padding throughout. For example, on .banner, I have margin-bottom: 1.8em as opposed to margin-bottom: 60px like Guil has.

For responsive behavior, shouldn't we use ems as much as possible? I suppose, visually, the results seem to be comparable, so perhaps it just preference.

In retrospect, ems are just a way to convert to px, usually with 1em = 16px. So, changing the 'base' away from 16px could make using ems good or bad, since all of our margins/padding will 'auto adjust.'

So, I guess, it really doesn't matter too much after all...

1 Answer

It does matter. Use em and vw units. em units have an exact proportional relationship to each other which makes em values amazing. Here is a good blog post about using ems:

em units

I hope this helps.

Yes, thank you for the link. I liked the example of making a 'font' resizer using 'small' and then %. Of course, one can probably use Sass for that now; that is, have an 'easily defined' variable in 1 place to change and affect the whole site.

It sounds like cascading might be troublesome for ems, so will watch for this.

Not a problem. yeah CSS Tricks is full of really useful articles. I'm glad it helped.