Why isn't em doubling the defined font size?

July 16, 2022

I understood that 2em doubled the size of the font that the element was calculated to have. But in this case, it doesn’t seem to be working like that.

(On Chrome)

Styles

  <style>
    p {
      font-size: 24px;
    }
    .go-big {
      font-size: 2em;
    }
  </style>

HTML

  <p>This should be 24 px</px>
  <p class="go-big">This should be 48 px?</px>

I have a working example here: https://stackblitz.com/edit/js-em-question-deborahk

Since the <p> element style is set to 24px, I would assume that adding a class with a font-size of 2em would double the font size to 48px. But it instead seems to double the default font size of 16 to 32px.

Is this a bug? Or something in the way these styles are inherited?

>Solution :

em means my parent’s font-size (when it comes to typographical properties like fontSize), according to the documentation.

Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.

go-big is a direct child of the body element so it font-size:2em indicates (2 * font-size of body).

You can test this link, where I have changed body font-size to 24px and now it correctly shows 48px (for 2em).