Home/ Questions/Q 7602057
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T23:18:57+00:00

When 1em is applied to an element, it takes the default value of the

  • 0

When 1em is applied to an element, it takes the default value of the browser (usually, 16px) or the font-size value of its parent, right?. But I noticed that if I use something like margin-top: 1em in a h1 element (without using a reset stylesheet, and therefore, h1 is set to font-size: 32px), then 1em is equal to 32px, even if its parent element is set to font-size: 16px.

However, using something like font-size: 100%; solves the discrepancy.

What am I missing?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When 1em is applied to an element, it takes the default value of the browser (usually, 16px) or the font-size value of its parent, right?

    No, it takes its own font-size, computed based on its parent (or the default browser-supplied value). Since the browser-supplied font-size of h1 is 32 pixels, the resultant margin is 32 pixels.

    However, using something like font-size: 100%; solves the discrepancy.

    By setting font-size: 100%; or font-size: 1em; on an element, you’re telling it to use 100% of the font size of its parent, so setting 1em as a length on anything else will follow that 100%.

    • 0