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

Luqman Shah
Luqman Shah
3,016 Points
Posted by Luqman Shah
Luqman Shah
3,016 Points

I still don't understand em and rem units? Is it important?

What difference or benefit do em and rem units have over pixel and percentage units? Here's some sample code from the css basics course videos I took in my notes.

Why is the font size written in em units instead of pixels, what benefit will it have over it? And why does this also effect the way we define the margin value? Also written in em units. And why are both the font size and margin properties sharing the same dividend of 16px when being converted into em units? h2 { font-size: 3.3125em; /* 53px/16px / font-weight: normal; line-height: 1.1; margin-bottom: .5em; / 20px/16px */ }

Would it make a difference if you just wrote everything in pixel units? Even if they are just small or subtle differences? h2 { font-size: 53px; font-weight: normal; line-height: 1.1; margin-bottom: 26px }

1 Answer

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The main difference (other than actual size) is that the em/rem units are based on the font. So if you change to a different font, those dimensions will change too.

But pixel dimensions are always the same and represent a specific distance on the screen.

So the choice of which to use should be based on what the measurement is being used for, and whether it should adapt to font changes.

Luqman Shah
Luqman Shah
3,016 Points
Luqman Shah
Luqman Shah
3,016 Points

Ahh ok, so in other words, the font-size and margin values are being defined in em units so that they can adapt to the font? And 16px would be the main size of the font?(If you were to scale the web browser, or launch the site on a mobile device, those values would adapt to the dimensions of each device? And that wouldn't be the case with pixel or percentage units? Unless you use media queries?) So essentially you devide the desired pixel value by the original font size of 16px, to get the converted em unit? But where is this original font size of 16px coming from? How do you get the original font size of 3.3125em? Which parent element are these values getting their dividend from?

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The exercise examples are based on typical standard font sizes. There's no guarantee they would be exactly that size in any specific browser. The main point is to be aware that a relationship between font and pixels does exist for a specific situation.

Luqman Shah
Luqman Shah
3,016 Points
Luqman Shah
Luqman Shah
3,016 Points

Thank you so much for your help, I recall you helped me with some other css questions too a couple days ago when I was having trouble, thanks Steven