Segítségével egy em érték létrehoz egy dinamikus vagy számított betűméret (történelmileg a em egység származik, a szélessége egy nagy “M” az adott betűtípust.). A numerikus érték a használt elem font-size tulajdonságának szorzójaként működik., Tekintsük ezt a példát:
p { font-size: 2em;}ebben az esetben a <p> elemek betűmérete kétszerese lesz a kiszámított font-size <p> elemeinek. Kiterjesztéssel a font-size 1em megegyezik annak az elemnek a kiszámított font-size értékével, amelyen azt használják.,
Ha a font-size nincs beállítva a <p>‘s ősei, akkor 1em megegyezik az alapértelmezett böngészővel font-size, ami általában 16px. Tehát alapértelmezés szerint 1em egyenértékű a 16px – val, és 2emegyenértékű a 32px – val., Ha beállított egy font-size a 20px a <body> elem mondani, akkor a 1em a <p> elemek helyett egyenértékű 20px, a 2em lenne egyenértékű, hogy a 40px.,
aem bármely szükséges képpontértékkel egyenértékű kiszámításához használhatja ezt a képletet:
em = desired element pixel value / parent element font-size in pixels
aem egy nagyon hasznos egység a CSS-ben, mivel automatikusan alkalmazkodik annak hosszához a betűtípushoz képest, amelyet az olvasó használ.
egy fontos tény, amelyet szem előtt kell tartani: em értékek vegyület., Be az alábbi HTML, valamint a 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>Az eredmény:
Feltételezve, hogy a böngésző alapértelmezett font-size 16px, a “külső” lenne teszi a 16px, de a “belső” lenne teszi a 25.6 px. Ennek oka az, hogy a belső <span>‘s font-size 1,6 em, ami a szülő font-size
értékéhez képest relatív, ami viszont a szülőfont-size értékéhez viszonyítva. Ezt gyakran összetételnek nevezik.