brug af en em værdi skaber en dynamisk eller beregnet skriftstørrelse (Historisk em enhed blev afledt af bredden af en kapital “m” i et givet skrifttype.). Den numeriske værdi fungerer som en multiplikator af font-size egenskaben for det element, som det bruges på., Overvej dette eksempel:
p { font-size: 2em;}i dette tilfælde vil skriftstørrelsen af<p>elementer fordoble den beregnedefont-sizearvet af<p> elementer. I forlængelse heraf er en font-size af 1em lig med den beregnede font-size for det element, det bruges på.,
Hvis font-size har ikke været indstillet på nogen af <p>‘s forfædre, og derefter 1em vil lige standardbrowser font-size, som er normalt 16px. Så, som standard 1em svarer til 16px og 2em svarer til 32px., Hvis du skulle indstille et font-size af 20P element på <body> element sig, så 1em på <p> elementer ville i stedet svare til 20px, og 2em ville svare til 40px.,
for at beregne em ækvivalent for enhver pi .elværdi, der kræves, kan du bruge denne formel:
em = desired element pixel value / parent element font-size in pixels
em er en meget nyttig enhed i CSS, da den automatisk tilpasser sin længde i forhold til den skrifttype, som læseren vælger at bruge.
en vigtig kendsgerning at huske på: EM-værdier forbindelse., Tag følgende html og 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>resultatet er:
antages det, at bro andserens standard font-size er 16P and, ordene “ydre” ville blive gengivet på 16P,, men ordet “indre” ville blive gengivet på 25.6 p.. Dette skyldes, at den indre <span> ‘s font-size er 1.6 em, hvilket er i forhold til forældrenesfont-size, hvilket igen er i forhold til forældrenesfont-size. Dette kaldes ofte sammensætning.