Welcome to the Treehouse Community
Looking to learn something new?
Shaked Gvirtsman2,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?
Aakash Srivastava5,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 :)
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 M7,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 Gvirtsman2,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?