Question

In CSS, an em is a relative unit based on the font-size of the document. So, what exactly is an em then, if the font-size of the document itself is measured in ems? Suppose we say:

<style type = "text/css">
body
{
    font-size: 1em;
}
</style>

So, an em is now recursively defined. So how is this handled by the browser?

The W3C docs say:

The ’em’ unit is equal to the computed value of the ‘font-size’
property of the element on which it is used. The exception is when
’em’ occurs in the value of the ‘font-size’ property itself, in which
case it refers to the font size of the parent element. It may be used
for vertical or horizontal measurement. (This unit is also sometimes
called the quad-width in typographic texts.)

But what if the element is document.body, so there is no parent element?

Answer 1

body is not the document root element — that’s a very common misconception. The parent element of body is html, whose default font size matches the browser’s default font size setting (typically 16px).¹

This applies even if you set a font-size value in ems on both body and html. So if you did this:

html, body { font-size: 2em; }

Then, assuming a default font size of 16px as set by the user, html will have a font size of 32px (twice the default font size) and body will have a font size of 64px (twice of its parent, html).

---

¹ _{To be precise, the html element’s default font size is the initial value, medium, which according to the spec corresponds to the preferred default font size as set by the user.}