Misunderstood EM unit

Time:2019-8-13

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.
Misunderstood EM unit

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*/
}

Misunderstood EM unit

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.*/
}

Misunderstood EM unit

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.

Recommended Today

The method of obtaining the resolution of display by pyqt5

The code is as follows import sys from PyQt5.QtWidgets import QApplication, QWidget class Example(QWidget): def __init__(self): super().__init__() self.initUI() #Interface drawing to initui method def initUI(self): self.desktop = QApplication.desktop() #Get display resolution size self.screenRect = self.desktop.screenGeometry() self.height = self.screenRect.height() self.width = self.screenRect.width() print(self.height) print(self.width) #Show window self.show() if __name__ == ‘__main__’: #Create applications and objects app […]