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?
Answer
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%.