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 Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Posted by qdzfplofsk
qdzfplofsk
22,025 Points

What's the rules in using em versus pixels for spacing?

I see them being used both in the video.

4 Answers

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Ems are weird to think in, I agree. I know I'm not going to sit here here and try to figure out at the design phase how many ems 25px is, if my font-size is based at 16px.

I use Sass on all of my projects, and I use some form of px to em function so I let Sass do the math when it compiles. So for me, it becomes as easy as

padding: em(5px);

and in return it compiles to

padding: 0.3125em;

You could even have a pixel fallback added by Sass if you need to support legacy browsers that don't support ems. Truth be told, I don't use ems where I know I want fixed width values. For instance, if I always want padding to be 5 pixels around an element, regardless of screen size, I'll use pixels. There is no benefit to possibly complicate the CSS with ems.

Here is an interesting idea from Chris Coyier: https://css-tricks.com/rems-ems/

I haven't used it yet, but I like how he thoroughly thought through the ups and downs of each of the sizing tools available to use, and try to get the best of them all. If anything the article makes you think about it.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

There really isn't a rule, however generally many [frameworks] have moved to ems for spacing, including foundation the the upcoming bootstrap 4.

Ems are kinda cool because they are relative, so you can make small changes in one area, and have a cascading trickle affect of relative spacing changes. It also can cause headaches because ems are relative to their parent, which is where rems come into play.

qdzfplofsk
qdzfplofsk
22,025 Points
qdzfplofsk
qdzfplofsk
22,025 Points

Good point I guess it would make sense to follow the frameworks. I just wonder from a preference point of view, if even Guil hasnt switched to rem/em for all spacing should people try to eliminate px usage now. I know as a designer its harder to think in ems but i guess that is why foundation uses calc().

qdzfplofsk
qdzfplofsk
22,025 Points
qdzfplofsk
qdzfplofsk
22,025 Points

Thx for the answer! I remember liking using foundation 3s px-to-em conversion so i could think in px again. Thankfully Sass is basically the standard at this point.