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!

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

Isha Srivastava
Isha Srivastava
5,002 Points
Posted by Isha Srivastava
Isha Srivastava
5,002 Points

confused!! why to use em instead of px ?

hi, this is a silly question but i am still confused about the em term, why cant we use px for sizing our text and if we are using em then it should be used only for text size or we can use it for sizing any other element also ?

thank you in advance.

4 Answers

Ali RahimDabagh
Ali RahimDabagh
2,296 Points

Dear Isha, all the guys answered best answers. But some points for you are right in here: you can use em for image size too like the code below:

<div style="width:10em; height:5em;"> <img style="width:10em; height:5em;" src="logo.png" /> </div>

In addition maybe it is not bad to expand your knowledge about "rem" and "em":

One of the problems with using "em" as font sizes is that they cascade, so you are forever writing rules that select nested elements to reset them back to 1em; CSS3 now has rem ("root em") to prevent that issue.

if you want to know more proceed with the below link: http://snook.ca/archives/html_and_css/font-size-with-rem

Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points
Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points

When deciding on whether or not you should use pixels or a relative unit, you should ask will my site be accessed on different platforms? More specifically will my site be accessed on a tablet, phone, or other mobile devices. Likely that answer is yes. Even with this being said, you aren't obligated to use a relative unit such as em. You could easily stick with pixels, and implement your site's text and other elements at different fixed sizes based on the users screen size. However, relative units (ems, rems, and percentages) will allow you to not use guess work. Media queries are sorta limited (depending how used) and can make you repeat some code over and over again. With relative units, your site will seamlessly scale up and down depending with few to no breaks in between. So essentially, it depends on what way you choose to implement your site's design on mobile platforms or smaller screen sizes.

As Stu stated, you should view the course provided here on treehouse.

Here's a pretty good explanation of ems and pixels: http://stackoverflow.com/questions/609517/why-em-instead-of-px

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Hey Isha,

We use em's to create a fluid layout as it is a bit more flexible when it comes to being viewed on a mobile device, whereas pixels (px) are used to create a static site that doesn't scale up or down. I highly recommend that you check out the Build a Responsive Website course with Allison Grayce as it is a great starting point to getting your head around it all, if I remember correctly there is a couple of detailed videos on the difference between pixels and em's.

Hopefully this helps

Stu :)