Question

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? Why not use em too for the body?

Answer 1

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).