Введение в единицы em в CSS

Единицы em позволяют задать размер шрифта в процентах от размера родителя. Давайте посмотрим на примере.

Пусть у нас есть вот такие вложенные теги:

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

Давайте зададим размер шрифта нашему диву:

cssdiv {
  font-size: 20px;
}

А абзацу зададим размер в 2em. Это значение соответствует шрифту в два раза больше размера шрифта родителя:

cssp {
  font-size: 2em; /* соответствует 40px */
}

А теперь абзацу зададим размер в 0.5em. Это значение соответствует половине размера шрифта родителя:

cssp {
  font-size: 0.5em; /* соответствует 10px */
}

Значение 1em сделает шрифт абзаца таким же, как и у родительского дива:

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