Introducere în unitățile em în CSS

Unitățile em permit setarea dimensiunii fontului în procente față de dimensiunea părintelui. Să vedem un exemplu.

Să presupunem că avem următoarele taguri imbricate:

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

Să setăm dimensiunea fontului pentru div-ul nostru:

cssdiv {
  font-size: 20px;
}

Iar pentru paragraf să setăm dimensiunea în 2em. Această valoare corespunde unui font de două ori mai mare decât dimensiunea fontului părintelui:

cssp {
  font-size: 2em; /* corespunde la 40px */
}

Acum să setăm pentru paragraf dimensiunea în 0.5em. Această valoare corespunde la jumătate din dimensiunea fontului părintelui:

cssp {
  font-size: 0.5em; /* corespunde la 10px */
}

Valoarea 1em va face ca fontul paragrafului să fie la fel ca cel al div-ului părinte:

cssp {
  font-size: 1em; /* corespunde la 20px */
}

Probleme practice

Să presupunem că avem codul HTML, pentru care vom rezolva probleme:

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;
}