Can anyone nicely explain what "em" is (a sizing unit of CSS)?

Can anyone nicely explain what em is as a sizing unit of CSS?

And when we use em as a size unit for a website, why use % for the body开发者_JAVA百科? Why not use em too for the body?

The best way to find out what it is, is to look at the CSS standard.

Here you can see that it is defined as the font-size of the element in question, i.e. it is related to the height of the font for the element. The font-size is not a measurement of any specific letter. The actual height of individual letters can be greater or less than the font-size, though typically they will be less. From Wikipedia:

In digital type, the relationship of the height of particular letters to the em is arbitrarily set by the typeface designer. However, as a very rough guideline, an "average" font might have a cap height of 70% of the em, and an x-height of 48% of the em.

One more thing to note, in the CSS standard:

The only exception to this rule is the 'font-size' property where 'em' and 'ex' values refer to the font size of the parent element.

This exception makes sense, otherwise you'd get a recursive definition for the font size.

A commonly used, but wrong, definition is that it is the width of the letter 'M' in question. It used to be defined like this in typography, but that is no longer true these days, and has never been true for CSS. The 'M' is in fact often less wide than 1 em (this depends on the font of course).

EDIT: I stand corrected: in CSS, it's defined as the font size, as per Mark Byers' answer.

(Originally, it was It's the width of the letter M. See http://en.wikipedia.org/wiki/Em_%28typography%29. Compare ex, which is the height of an x.)

An em supposedly represents 1 letter M's worth of width, but in practice is the current font size.

Ems are relative, so if you do:

table { font-size: 2em }
td { font-size: 2em }

Text in your td's would be four times the size of the body text, since the table's font size is twice the body's, and the td's font size is twice the table's.

p { margin-bottom: 1em }

Paragraphs will now have one line break beneath them, of exactly the height of one line of text. (Letters will usually be shorter than the line, but you get the idea.)

'Em' is "x times the current font the user agent is using".

This means that, if the visitor is using 10pt font as the default, 1em equals to 10pt, 2em equals to 20pt and so on.

You may find additional information for the different CSS units here: http://www.w3schools.com/css/css_units.asp

You already have some understanding of 'em' from existing answers but none of them noticed one more thing.

With em's you can create so-called 'elastic' make-up. This means that if you specify all sizes of blocks in em's then your site will keep its proportions after user presses 'Ctrl+' (or maybe another combination in some browsers to enlarge font size).

From Wikipedia:

An em is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font. Originally the unit was derived from the width of the capital "M" in a particular typeface. This unit is not defined in terms of any specific typeface, and thus is the same for all fonts at a given point size. So, 1 em in a 16 point typeface is 16 points.

In CSS, "em" is a way to express size relative to the size of the font. "1 em" means "the same size as the current font box." "1.5 em" means the element is sized about 1-1/2 times the font size.

Everything scales nicely that way.

See: CSS Lengths Unit Reference