Misunderstood EM unit

emUnits are often considered relative to the parent element.font-size Size is calculated.

For example, the parent element of an element is set as followsfont-size:

body {
    font-size:20px;
}

Among themdivSet upfont-sizeSet up1.5em :

div {
    font-size:1.5em;
}

thatdivElementalfont-size = 20 * 1.5 = 30px.

Physical truth

We all know that.emIt’s a relative unit, but in factemThe unit is relative to itself.font-sizeSize, we can try:

div {
    font-size:20px;
    Margin: 2em; /* 2 times its font-size*/
}

Using this, we can break the classic.emIs the view relative to the size of the parent element:

body {
    font-size:40px;
}
div {
    font-size:20px;
    Margin: 2em; /* I don't have a font-size calculation relative to body.*/
}

If the parent element is inheritedfont-sizeSize,divOfmarginThe calculated value is60pxNot the last40pxObviously, this value is based ondivOneselffont-sizeComputing.

So what we know before that:

EM units are calculated relative to font-size of the parent element

It should be changed to:

EM units are calculated relative to the font-size of the element, but don’t forget that font-size inheritsfont-sizeSize

And in daily developmentemUnits are common in font units rather than in other units of attributes, so they cannot be seen.emIt’s actually relative to the element.font-sizeBecausefont-sizeThe size of the parent element is directly inherited, soemThe misunderstanding has always existed.