Do CSS ems always represent the font size?

Question

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

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

It doesn't seem right though that em is used for setting the width of divs etc like YUI grids does:

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

Everytime I read about em, I forget what it really represents.

I'm hoping someone can explain it to me so it sticks in my head heeh.

Answer 1

It does mean the size of the font, but using it for width/height is useful for creating designs that scale with the font-size. This is becoming less useful now that most browsers can do full page zoom. Before when they could only change the size of the text, using em for width/height would allow those elements to scale also.

Answer 2

They are re-calculating exact pixel values to em to make them scalable.

See this on-line calculator for example.

Answer 3

Traditionally, em is the width of the upper case M. In practise though, an em is the point size of the font.

http://comm415.wordpress.com/2008/04/04/em-dash-versus-en-dash/

Answer 4

Historically it is the width of an "M" in the font. Hence the name! In CSS2.1 it is defined to be the same as the font-size.

In many cases it seems more natural to use em rather than points or pixels, because it is relative to the font size. For example you might define a text-column to have a width of 40em. If you later decide to change the font-size, the column will still keep the same number of letters per line.

Answer 5

An em size is proportional to its containing element.

For example:

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

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

Answer 6

This article is pretty useful if you are using sizes specified in ems: How to size text using ems