What's the difference between em units and percents?

Question

I have read a lot of articles on this topic (and searched for Q&A), and I have found, but I still don't understand what the difference between em units and percents is. Help?

P.S. I've seen this code example:

p { font-size: 10px; }
p { line-height: 120%; }  /* 120% of 'font-size' */

What is that supposed to mean? Why on earth would anyone want to set a line height to a percentage value of a font size?

Answer 1

OK, so I've decided to sum up the answers.

• line-height's percentage value is relative to the current font-size.
• em units is always relative to font-size.
• Percents depends on context. For example, if they're used in font-size, they will be relative to the current font-size; if it's in height, they will be relative to the height.
• It changes a little bit when parent tag has font size declared as "small", "medium" or "large", because values of these are affected by browser's setting. In this context 1em =\= 100%, 1em seems to make setting a bit more "small" or a bit more "large" than 100%, read about it here.

Thank you, guys. :)

Answer 2

Line height is usually a multiple of the font size. In fact, it is the only value for which you don't have to specify a unit:

p { line-height: 1.2; } /* = 1.2em = 1.2*font-size = 120% of font-size */

If line-height is proportionate to font-size, it is easier to resize the font, without having to worry about fixed line-height.

Answer 3

1em = 100%, 2em = 200%, 1,4 em = 140% and so on. However, it's actually contex dependent.

1em means "equeal to the actual font-size", 2 - "2 times the font-size". EMs adapt to users settings.

It changes a little bit when parent tag has a font size declared as "small", "medium" or "large", because values of these are affected by browser's setting. When user changes client font size into "small" or "large", 1em seems to make the font a bit smaller or larger than 100%.

Further reading: https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent