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

Implementation of PHP Facades

Example <?php class RealRoute{ public function get(){ Echo’Get me’; } } class Facade{ public static $resolvedInstance; public static $app; public static function __callStatic($method,$args){ $instance = static::getFacadeRoot(); if(!$instance){ throw new RuntimeException(‘A facade root has not been set.’); } return $instance->$method(…$args); } // Get the Facade root object public static function getFacadeRoot() { return static::resolveFacadeInstance(static::getFacadeAccessor()); } protected […]