Uvod u CSS em jedinice

Em jedinice omogućavaju da postavite veličinu fonta u procentima od veličine roditeljskog elementa. Hajde da pogledamo na primeru.

Recimo da imamo sledeće ugnježdene tagove:

html<div>
  <p>
    tekst
  </p>
</div>

Hajde da postavimo veličinu fonta našem div-u:

cssdiv {
  font-size: 20px;
}

A pasusu postavimo veličinu na 2em. Ova vrednost odgovara fontu dva puta većem od veličine fonta roditelja:

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

A sada pasusu postavimo veličinu na 0.5em. Ova vrednost odgovara polovini veličine fonta roditelja:

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

Vrednost 1em će učiniti da font pasusa bude isti kao i kod roditeljskog div-a:

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

Praktični zadaci

Recimo da imamo HTML kod, za koji ćemo rešavati zadatke:

html<ul>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</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;
}