Introduzione alle unità em in CSS

Le unità em consentono di impostare la dimensione del carattere in percentuale rispetto alla dimensione del genitore. Diamo un'occhiata a un esempio.

Supponiamo di avere i seguenti tag annidati:

<div>
	<p>
		text
	</p>
</div>

Impostiamo la dimensione del carattere per il nostro div:

div {
	font-size: 20px;
}

E per il paragrafo impostiamo la dimensione a 2em. Questo valore corrisponde a un carattere due volte più grande della dimensione del carattere del genitore:

p {
	font-size: 2em; /* corrisponde a 40px */
}

Ora impostiamo la dimensione del paragrafo a 0.5em. Questo valore corrisponde alla metà della dimensione del carattere del genitore:

p {
	font-size: 0.5em; /* corrisponde a 10px */
}

Il valore 1em renderà il carattere del paragrafo uguale a quello del div genitore:

p {
	font-size: 1em; /* corrisponde a 20px */
}

Problemi pratici

Supponiamo di avere un codice HTML per il quale risolveremo i problemi:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Determina quale dimensione del carattere in px avranno i tag li come risultato dell'esecuzione del seguente codice:

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

Determina quale dimensione del carattere in px avranno i tag li come risultato dell'esecuzione del seguente codice:

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

Determina quale dimensione del carattere in px avranno i tag li come risultato dell'esecuzione del seguente codice:

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}