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 Basics (2014) Understanding Values and Units Em Units

Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points
Posted by Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points

Why should we use em?

Why should we use "em". Isn't just easier using % or px. I guess that if you change for example font size in the body then everything else will change in the same context. But isn't harder to understand the size the font will be?

5 Answers

Aakash Srivastava
Aakash Srivastava
5,415 Points
Aakash Srivastava
Aakash Srivastava
5,415 Points

Hey Shaked Gvirtsman ,
px is an absolute unit of measurement .
Because it is an absolute measurement, it may be used any time you want to define something to be a particular size, rather than being proportional to something else like the size of the browser window or the font size.

em is not an absolute unit - it is a unit that is relative to the currently chosen font size.
Use em when you specifically want the size of something to depend on the current font size.

% is also a relative unit, in this case, relative to either the height or width of a parent element. They are a good alternative to px units for things like the total width of a design if your design does not rely on specific pixel sizes to set its size.
Using % units in your design allows your design to adapt to the width of the screen/device, whereas using an absolute unit such as px does not.

So , it totally depends on what you want .
The only difference between em and % is that -

  • In em is relative to the currently chosen font size
  • while , % is relative to either the height or width of a parent element.
    So , most of the time , you will set your font size in relative to currently chosen font size , not in relative to it parent height or width .
    That's why people use em most of the time.

Hope this helped :)

Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points
Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points

What is best in your opinion? From what I just read it looks like % / px is most understandable. (you explained it very detailed, but I'm still a bit confused about the en. I'm not sure how to define who is the child of who, who is the parent of who etc. It's a bit confusing:)

Aakash Srivastava
Aakash Srivastava
5,415 Points
Aakash Srivastava
Aakash Srivastava
5,415 Points

Ok , lets have an example - 

.example {
    font-size: 20px;
}

In this case, 1em on this element, or on its child elements (assuming no other font-size definitions), would be equal to 20px. So if we added a line: 

.example {
    font-size: 20px;
    border-radius: .5em;
}

This border-radius value of .5em computes to 10px (i.e. 20*.5). Similarly: 

.example {
    font-size: 20px;
    border-radius: .5em;
    padding: 2em;
}

The padding value of 2em is equal to 40px (20*2). As mentioned, this type of calculation would apply to any child elements as well — unless any of those child elements had an explicitly defined font-size value, in which case the em value would be calculated based on that. If no font size is defined anywhere in the CSS, the em unit will be equal to the browser’s default font size for the document, which is usually 16px.

Have you got it?

Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points
Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points

Yes. I got it. Thank you so much! *Just to make sure, the "example" class is the parent, everything inside him are his children. And if just one of them has for example px then they all rely on him?

Aakash Srivastava
Aakash Srivastava
5,415 Points
Aakash Srivastava
Aakash Srivastava
5,415 Points

As you asked " if just one of them has for example px then they all rely on him? -
If example is parent class and having font-size of 20 px , the font size of all it's children will be relative to 20px .
Now , if you explicitly mention the font-size of any of it's child , it will affect the font size of only that child.
In order to change the font -size of all the child , you must have to change the font size of parent .
Let's have an example - Ex- 

<div class='example'>
  <p class='one'>
  Hello person one
  </p>
  <p class='two'>
  Hello person two
  </p>
  <p class='three'>
  Hello person three
  </p>
</div>

.example{
  font-size: 20px;
}
.one{
  font-size: 1.25em;
}
.two{
  font-size: 1.25em;
}
.three{
  font-size: 24px;
}

So , here , the size of child one and two will be 1.25 * 20px while the size of child three will be 24px as you have explicitly mentioned it.
Thanks , hope it helped :)

mryoung
mryoung
4,156 Points
mryoung
mryoung
4,156 Points

Here are some examples, perhaps they’ll help too:

%: You have a navigation menu in a div with links and a background color. Unfortunately the div ends before it reaches the edge of the window. So you set the div to 100% width.

Px: You are creating a section and the layout calls for a div with a background color to be a specific height. So you set it to a height of 500px. Making it not move with resizing.

Ems: The effects can be stacked. So if you have a need where the font sizes will need to be different based on inheritance between the parent and child, these are good.

Rems: These are impacted by the root font size (typically 16px), and multiply that number by whatever the rem number is.

It’s good to know how these all work and to use them when you need to, but there’s not a hard rule between rems and ems. Personally, unless the layout calls for it for a reason, I like rems for my font sizes and spacing.

Sean M
Sean M
7,344 Points
Sean M
Sean M
7,344 Points

Sunny summed it up perfectly.

em is an absolute measurement meaning it may be used any time you want to define something to be a particular size, rather than being proportional to something else like the size of the browser window or the font size.

Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points
Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points

"Use em when you specifically want the size of something to depend on the current font size." Do you mean for example that font size of a header is 30px so I can use em if he has a child and then 2 em= 60px?

Aakash Srivastava
Aakash Srivastava
5,415 Points
Aakash Srivastava
Aakash Srivastava
5,415 Points

Yeah , you are right...Just declare a value of 1 em explicitly and everytime , you set a new em it will be respective of that .

Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points
Shaked Gvirtsman
Shaked Gvirtsman
2,270 Points

Ok, guess I know enough to understand it "theoretically" Thank you