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

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

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

`<div> <p> text </p> </div>`

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

`div { font-size: 20px; }`

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

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

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

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

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

`p { font-size: 1em; /* соответствует 20px */ }`

## Практические задачи

Пусть у нас есть HTML код, для которого мы будем решать задачи:

`<ul> <li>text</li> <li>text</li> <li>text</li> </ul>`

Определите, какой размер шрифта в `px` будут иметь теги `li` в результате выполнения следующего кода:

`ul { font-size: 10px; } li { font-size: 2em; }`

Определите, какой размер шрифта в `px` будут иметь теги `li` в результате выполнения следующего кода:

`ul { font-size: 20px; } li { font-size: 1.5em; }`

Определите, какой размер шрифта в `px` будут иметь теги `li` в результате выполнения следующего кода:

`ul { font-size: 30px; } li { font-size: 0.5em; }`
←→
↑