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
Nathalie Agnekil
6,665 PointsWhy ems and pxs, and when?
I'm a little confused about the em/px situation. I know that px is fixed size, and ems are not (I think, but why would that be the case if 1em=16px?) I'm so confused about the concept and expecially when to use which? Margins? Paddings? Font-size? HELP!
3 Answers
John Lack-Wilson
8,181 PointsEm is a scalable unit, whereas px is not. For responsive design, it is better to use em.
Pixels: 1 pixel is equal to one dot on the device
Em: An 'em' is equal to the current font-size. Therefore if your device has a higher font-size, an em will be differently sized (not exactly 1em = 16px).
In terms of margin and padding, margin is the space around the element, whereas padding is the space within the element. This link has a good diagram showing the differences between margin, padding, border and element.
Nathalie Agnekil
6,665 PointsI don't really know how to use ems. I don't know the proportions as I do with pixels. How should I think? What is the "current font-size"? Reason I said 16px=1em is because Guil says that in the CSS Basics course. How do I know which font-size is "default"? I have no idea how to think here. And what's the difference then between em and rem.
I know what margins and paddings ARE. I just don't know when to use px or em. Should I use em in margin and px in padding? Should I use em in font-size but not in margin and padding? Cause it seems like there is no pattern in this course, it seems like it's just random if he uses em or px.
John Lack-Wilson
8,181 PointsI think 16px = 1em is probably a good way to think of it. Although I would suggest rather than thinking "what is the current font-size", I would recommend playing around with different em sizes and using Chrome's Developer Tools (right click -> inspect), then you can use the 'Toggle device toolbar' in the top left corner (looks like a phone and a tablet icon) to see how your page looks on different devices. As you get more experienced using em, you'll soon use it out of habit, rather than px.
I see what you mean re: margins and paddings. It's all personal preference really, although the more responsive you can make your site, the better. More and more people are viewing sites on mobile devices, and so we want as many people to have a good experience using it, regardless of their choice of medium. My preference is to use rem with margins and padding and the reason for this is that there is a framework called Bootstrap which has started using rem (as per version 4) for its margins and paddings.
The reason it probably seems random is that the teacher may have been a web developer for a long time, and they may be still in the habit of using px. My advice would be to choose a responsive size format and be consistent with it.
Antti Lylander
9,686 PointsEm can be confusing as it is always relative to the parent elements font size. Rem is relative to root's font size. Google it. Reading from different sources will help you understand it better.
Antti Lylander
9,686 PointsWell, I'd like to remind everyone that a pixel is not a pixel anymore. A pixel in css is defined to be 1/96th of an inch. In other words, 96 pixels on any display should be one inch.