Въведение в единиците em в CSS

Единиците em позволяват да се зададе размер на шрифта в проценти от размера на родителя. Нека разгледаме пример.

Да предположим, че имаме следните вложени тагове:

html<div>
  <p>
    text
  </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>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;
}