Введение в единицы 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;
}