Why the gggg and hhhh do not show the size which is double of the size of heading?

Question

In my opinion,2em means that gggg and hhhh will have double size of heading... I know I misunderstood the function of "em",So can anyone help me with a suitable example? Thank you!
https://code.sololearn.com/WeRyf51UCNQ9/?ref=app

Answer 1

You are welcome, @GO👍😊

Answer 2

You are welcome😊
No, not only when some element is a child. 1em is equal to the default font size specified in the browser. When we set the font size for the entire page, we work with this parameter, and em will be calculated based on the default font size.
In the case when em is used for child, then 1em is equal to the font size of its parent.

Answer 3

Maybe this will help:
Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16). Look at CSS Units for more measurement units.

There are examples:
https://www.w3schools.com/cssref/css_units.asp
https://www.w3schools.com/TAgs/ref_pxtoemconversion.asp
http://www.w3.org/Style/Examples/007/units.en.html

Answer 4

Thank you now I understand! Now the problem is how we use em? Is it only be used when a element in css is a child?

Answer 5

A clear explanation. Tqvm NezhnyjVampir😀