L’utilisation d’une valeuremcrée une taille de police dynamique ou calculée (historiquement, l’unitéem était dérivée de la largeur d’un « M » majuscule dans une police donnée.). La valeur numérique agit comme un multiplicateur de la propriétéfont-size de l’élément sur lequel elle est utilisée., Considérons cet exemple:
p { font-size: 2em;}Dans ce cas, la taille de la police de <p> éléments sera le double de la calculés font-size héritée par <p> éléments. Par extension, un font-size de 1em est égale à la calculés font-size de l’élément sur lequel il est utilisé.,
Si un font-size n’a été défini sur aucun des ancêtres de <p>, alors 1em sera égal au navigateur par défaut font-size, qui est généralement 16px. Donc, par défaut 1em est équivalent à 16px et 2em est équivalent à 32px., Si vous définissez un font-size de 20px sur le <body> élément dire, puis 1em sur le <p> éléments serait plutôt l’équivalent de la balise 20px, et 2em serait l’équivalent de 40px.,
pour calculer l’équivalentem pour toute valeur de pixel requise, vous pouvez utiliser cette formule:
em = desired element pixel value / parent element font-size in pixels
Leem est une unité très utile en CSS car il adapte automatiquement sa longueur par rapport à la police que le lecteur choisit d’utiliser.
un fait important à garder à l’esprit: les valeurs em composées., Prenez le code HTML et CSS suivant:
html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */}span { font-size: 1.6em;}<div><span>Outer <span>inner</span> outer</span></div>le résultat est:
En supposant que la valeur par défaut du navigateur font-size est 16px, les mots « outer” seraient rendus à 16px, mais le mot « inner” être rendu à 25,6 px. C’est parce que l’intérieur <span>‘s font-size est 1.6 em qui est par rapport à son parent font-size, qui est à son tour par rapport à son parent font-size. Ceci est souvent appelé la composition.