Mit einem em Wert schafft eine dynamische oder berechnete Schriftgröße (historisch em Einheit wurde abgeleitet von der Breite a capital „M“ in einer bestimmten schriftart.). Der numerische Wert fungiert als Multiplikator der Eigenschaft font-size des Elements, für das er verwendet wird., Betrachten Sie dieses Beispiel:
p { font-size: 2em;}In diesem Fall ist die Schriftgröße der <p> – Elemente doppelt so hoch wie die berechnete font-size, die von <p> – Elementen geerbt wird. Durch Erweiterung entspricht eine font-size von 1em der berechneten font-size des Elements, auf dem es verwendet wird.,
Wenn eine font-size für keine der Vorfahren von <p>festgelegt wurde, entspricht 1em dem Standardbrowser font-size, der normalerweise 16px. Also, standardmäßig 1em ist äquivalent zu 16px, und 2em ist äquivalent zu 32px., Wenn Sie eine font-size von 20 Pixel für das <body> – Element festlegen würden, dann wären die 1em für die <p> – Elemente stattdessen äquivalent zu 20px und 2em wäre äquivalent zu 40px.,
Um das em Äquivalent für jeden erforderlichen Pixelwert zu berechnen, können Sie diese Formel verwenden:
em = desired element pixel value / parent element font-size in pixels
Die em ist eine sehr nützliche Einheit in CSS, da sie ihre Länge automatisch an die Schriftart anpasst, die der Leser verwendet.
Eine wichtige Tatsache zu beachten: em-Werte compound., Nehmen Sie das folgende HTML und 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>Das Ergebnis ist:
Unter der Annahme, dass die Standardeinstellung des Browsers font-size 16px beträgt, werden die Wörter“ outer „mit 16px gerendert, aber das Wort“ inner “ wird mit 25,6 px gerendert. Dies liegt daran, dass die innere <span>’s font-size 1,6 em ist, was relativ zur font-size seiner Eltern ist, was wiederum relativ zur font-sizeseiner Eltern ist. Dies wird oft als Compoundierung bezeichnet.