Misunderstood EM unit
em
Units 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 themdiv
Set upfont-size
Set up1.5em
:
div {
font-size:1.5em;
}
thatdiv
Elementalfont-size = 20 * 1.5 =
30px.
Physical truth
We all know that.em
It’s a relative unit, but in factem
The unit is relative to itself.font-size
Size, we can try:
div {
font-size:20px;
Margin: 2em; /* 2 times its font-size*/
}
Using this, we can break the classic.em
Is 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-size
Size,div
Ofmargin
The calculated value is60px
Not the last40px
Obviously, this value is based ondiv
Oneselffont-size
Computing.
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 inherits
font-size
Size
And in daily developmentem
Units are common in font units rather than in other units of attributes, so they cannot be seen.em
It’s actually relative to the element.font-size
Becausefont-size
The size of the parent element is directly inherited, soem
The misunderstanding has always existed.