Увод у em јединице у CSS-у

Јединице em омогућавају да се величина фонта постави у процентима у односу на величину родитеља. Хајде да погледамо на примеру.

Претпоставимо да имамо следеће угњежђене тагове:

html<div>
  <p>
    текст
  </p>
</div>

Хајде да поставимо величину фонта нашем div-у:

cssdiv {
  font-size: 20px;
}

А параграфу да поставимо величину у 2em. Ова вредност одговара фонту два пута већем од величине фонта родитеља:

cssp {
  font-size: 2em; /* одговара 40px */
}

А сада параграфу да поставимо величину у 0.5em. Ова вредност одговара половини величине фонта родитеља:

cssp {
  font-size: 0.5em; /* одговара 10px */
}

Вредност 1em ће учинити фонт параграфа истим као и код родитељског div-а:

cssp {
  font-size: 1em; /* одговара 20px */
}

Практични задаци

Претпоставимо да имамо HTML код, за који ћемо решавати задатке:

html<ul>
  <li>текст</li>
  <li>текст</li>
  <li>текст</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;
}