met behulp van een em waarde creëert een dynamische of berekende lettergrootte (historisch gezien werd de eenheid em afgeleid van de breedte van een hoofdletter “M” in een bepaald lettertype.). De numerieke waarde fungeert als een vermenigvuldiger van de eigenschap font-size van het element waarop het wordt gebruikt., Neem dit voorbeeld:
p { font-size: 2em;}In dit geval zal de lettergrootte van <p> elementen het dubbele zijn van de berekende font-size overgenomen door <p> elementen. Bij uitbreiding is een font-size van 1em gelijk aan de berekende font-size van het element waarop het wordt gebruikt.,
als een font-size niet is ingesteld op een van de voorouders van <p>, dan zal 1em gelijk zijn aan de standaardbrowser font-size, wat gewoonlijk 16px. Standaard is 1em gelijk aan 16px, en 2em is gelijk aan 32px., Als je een font-size van 20px op de <body> element zeggen, dan 1em op de <p> elementen zou in plaats daarvan gelijk zijn aan 20px, en 2em zou gelijk zijn aan 40px.,
om het equivalent van em voor elke vereiste pixelwaarde te berekenen, kunt u deze formule gebruiken:
em = desired element pixel value / parent element font-size in pixels
de em is een zeer nuttige eenheid in CSS omdat het automatisch zijn lengte aanpast ten opzichte van het lettertype dat de lezer kiest te gebruiken.
een belangrijk feit om in gedachten te houden: em waarden compound., Neem de volgende HTML en CSS:
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>het resultaat is:
aangenomen dat de standaard van de browser font-size 16px is, worden de woorden “outer” weergegeven op 16px, maar het woord “inner” wordt weergegeven op 25,6 px. Dit komt omdat de binnenste <span>’s font-size 1.6 em is wat relatief is ten opzichte van de ouder font-size, wat op zijn beurt relatief is ten opzichte van de ouder font-size. Dit wordt vaak compounding genoemd.