przy użyciu wartości emtworzy się dynamiczny lub obliczony rozmiar czcionki (historycznie Jednostka em pochodzi od szerokości wielkiej litery „M” w danym kroju pisma.). Wartość liczbowa działa jako mnożnik właściwościfont-size elementu, na którym jest używana., Rozważ ten przykład:
p { font-size: 2em;}w tym przypadku rozmiar czcionki <p>elementów będzie dwukrotnie mniejszy niż obliczony font-sizeodziedziczony przez <p> elementów. Dodatkowo,font-size z1em równa się obliczonemufont-size elementu, na którym jest używany.,
Jeśli font-size nie został ustawiony na żadnym z przodków <p>, to 1em będzie równa domyślnej przeglądarce font-size, która zwykle jest . Tak więc domyślnie 1em jest równoważne 16px, a 2emjest równoważne 32px., Jeśli ustawisz font-size z 20px na <body> element say, to 1em na <p> elementy będą równoważne 20px I 2em byłyby równoważne 40px.,
aby obliczyć ekwiwalent em dla dowolnej wymaganej wartości piksela, możesz użyć tej formuły:
em = desired element pixel value / parent element font-size in pixels
em jest bardzo przydatną jednostką w CSS, ponieważ automatycznie dostosowuje swoją długość względem czcionki, którą czytelnik wybierze.
należy pamiętać o jednym ważnym fakcie: wartości em złożone., Weźmy następujący kod HTML i 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>wynik jest następujący:
zakładając, że domyślna wartość przeglądarki font-size wynosi 16px, słowa „zewnętrzne” będą renderowane na 16px, ale słowo „wewnętrzne” będzie rendered at 25.6 px. Dzieje się tak dlatego, że wewnętrzny <span>’s font-size wynosi 1.6 em, który jest względny do jego rodzica font-size, który jest z kolei względny do jego rodzica font-size. Jest to często nazywane compounding.