Pomocí em hodnota vytváří dynamické nebo počítačová velikost písma (historicky em jednotky byl odvozen od šířky velkým „M“ v daném písmu.). Číselná hodnota působí jako multiplikátorfont-size vlastnosti prvku, na kterém se používá., Vezměme si tento příklad:
p { font-size: 2em;}V tomto případě, velikost písma <p> prvky budou dvakrát vypočítaný font-size dědí <p> prvky. Potažmo, font-size 1em se rovná vypočtené font-size elementu, na kterém je použit.,
Pokud font-size nebyla nastavena na jakoukoli <p>‚s předky, pak 1em se bude rovnat výchozí prohlížeč font-size, který je obvykle 16px. Takže, ve výchozím nastavení 1em je ekvivalentní 16px 2em je ekvivalentní 32px., Pokud byste měli nastavit font-size 20px na <body> element říct, tak 1em <p> prvky, místo toho by se rovnalo 20px, a 2em by se rovnalo 40px.,
aby bylo možné vypočítat em ekvivalent pro každou hodnotu pixelu nutné, můžete použít tento vzorec:
em = desired element pixel value / parent element font-size in pixels
em je velmi užitečné jednotky v CSS, protože to se automaticky přizpůsobí jeho délka v poměru k písmo, které se čtenář rozhodne použít.
jeden důležitý fakt, který je třeba mít na paměti: sloučenina hodnot em., Vezměte následující HTML 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>výsledek je:
za Předpokladu, že výchozí nastavení prohlížeče font-size je 16px, slova „vnější“ bude vykreslen na 16px, ale slovo „vnitřní“ bude vykreslen na 25.6 px. Je to proto, že vnitřní <span>‚font-size je 1,6 em, což je vzhledem k jeho rodičem je font-size, což je zase vzhledem k jeho rodičem je font-size. To se často nazývá míchání.