Does CSS ems really represent font size?

Question

From what I know, the em keyword in CSS means the current font size.

So, if you put 1.2 em, it means 120% of the font height.

It doesn't look like em is used to set the width of a div, etc., like a YUI grid:

margin-right:24.0769em;*margin-right:23.62em; 

Every time I read about them, I forget what it really represents.

I hope someone can explain this to me so that he gets stuck in my head.

Answer 1

Historically, this is the width of the "M" in the font. Hence the name! In CSS2.1, this defined will be the same as the font size.

In many cases, it seems more natural to use em rather than dots or pixels, because it is relative to the font size. For example, you can define a text column 40 meters wide. If you later decide to change the font size, the column will still contain the same number of letters per row.

Answer 2

Traditionally, em is the width of the uppercase M. In practice, however, em is the size of the font point.

em dash vs en dash .

Answer 3

This means the font size, but using it for width / height is useful for creating projects whose size depends on the font size. This is becoming less useful now that most browsers can do full-screen scaling. Previously, when they could only resize text using em for width / height, these elements could also scale.

Answer 4

The size of em is proportional to the element containing it.

For instance:

 <!-- Browser default size (usually 16px) --> <div style="font-size: 1.00em;"> <!-- 150 % of the container size: 16 + (16/2) = 24 --> <div style="font-size: 1.50em;"> 

This editor keeps this in mind for me (as to how it works).

Answer 5

They recalculate the exact pixel values ​​to em to make them scalable.

See an online calculator , for example.

Answer 6

This article is very useful if you use the sizes specified in ems: How to size text using ems