ved Hjelp av en em verdi skaper et dynamisk eller beregnet skriftstørrelse (historisk em enhet ble avledet fra bredden av en stor «M» i en gitt font.). Den numeriske verdien fungerer som en multiplikator av font-size holderen for elementet som er brukt., Se på dette eksempelet:
p { font-size: 2em;}I dette tilfellet, skriftstørrelsen av <p> – elementer vil være dobbelt beregnet font-size arvet av <p> – elementer. Ved utvidelse, en font-size av 1em er lik den beregnede font-size av elementet som er brukt.,
Hvis en font-size har ikke blitt satt på noen av <p>‘s forfedre, deretter 1em vil lik standard nettleser font-size, som er vanligvis 16px. Så, standard 1em tilsvarer 16px, og 2em tilsvarer 32px., Hvis du var å sette en font-size av 20 piksler på <body> – element si, så 1em på <p> – elementer ville i stedet være tilsvarende 20px, og 2em ville være tilsvarende 40px.,
for å beregne em tilsvarende for alle pixel verdien som kreves, kan du bruke denne formelen:
em = desired element pixel value / parent element font-size in pixels
em er en veldig nyttig enhet i CSS siden det automatisk tilpasser seg sin lengde i forhold til skriften at leseren velger å bruke.
En viktig faktum å huske på: em verdier sammensatte., Ta 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:
Forutsatt at nettleserens standard font-size er 16px, ordene «ytre» ville bli gjengitt på 16px, men ordet «indre» ville bli gjengitt på 25.6 px. Dette er fordi den indre <span>s font-size 1,6-em som er i forhold til sine foreldres font-size, som er i sving i forhold til sine foreldres font-size. Dette kalles ofte sammensatte.