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:

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

Impostiamo la dimensione del carattere per il nostro div:

cssdiv {
  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:

cssp {
  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:

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

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

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

Problemi pratici

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

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

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

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

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