Utilizzando un valoreem crea una dimensione di carattere dinamica o calcolata (storicamente l’unità em è stata derivata dalla larghezza di una “M” maiuscola in un determinato carattere.). Il valore numerico funge da moltiplicatore della proprietàfont-size dell’elemento su cui viene utilizzato., Considera questo esempio:
p { font-size: 2em;}In questo caso, la dimensione del carattere degli elementi <p>sarà il doppio degli elementi font-sizeereditati da <p>. Per estensione, un font-sizedi1emequivale alfont-size calcolato dell’elemento su cui viene utilizzato.,
Se un font-size non è stato impostato su nessuno degli antenati di <p>, allora 1em sarà uguale al browser predefinito font-size, che di solito è 16px. Quindi, per impostazione predefinita1em è equivalente a16px, e2em è equivalente a32px., Se si imposta un font-size di 20px su <body> elemento dire, quindi 1em su <p> elementi che invece sarebbe equivalente a 20px e 2em sarebbe equivalente a 40px.,
per calcolare il em equivalente per ogni pixel il valore richiesto, è possibile utilizzare questa formula:
em = desired element pixel value / parent element font-size in pixels
em è molto utile unità nel CSS, poiché si adatta automaticamente la sua lunghezza relativa al tipo di carattere che il lettore sceglie di utilizzare.
Un fatto importante da tenere a mente: i valori em sono composti., Prendi i seguenti HTML e 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>Il risultato è:
Supponendo che l’impostazione predefinita del browser font-size sia 16px, le parole “esterno” verrebbero renderizzate a 16px, ma la parola “interno” essere reso a 25.6 px. Questo perché l’interno <span>‘s font-size è 1.6 em che è relativo al suo genitore font-size, che è a sua volta relativo al suo genitore font-size. Questo è spesso chiamato compounding.