Uvod v enote em v CSS

Enote em omogočajo določitev velikosti pisave v odstotkih glede na velikost starševskega elementa. Poglejmo si primer.

Recimo, da imamo naslednje gnezdene oznake:

html<div>
  <p>
    besedilo
  </p>
</div>

Določimo velikost pisave za naš div:

cssdiv {
  font-size: 20px;
}

Za odstavek pa določimo velikost v 2em. Ta vrednost ustreza pisavi, ki je dvakrat večja od velikosti pisave starša:

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

Zdaj pa določimo velikost odstavka na 0.5em. Ta vrednost ustreza polovici velikosti pisave starša:

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

Vrednost 1em bo naredila pisavo odstavka enako kot pri starševskem divu:

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

Praktične naloge

Recimo, da imamo HTML kodo, za katero bomo reševali naloge:

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