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

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

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

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

Нека зададем размер на шрифта за нашия div:

div {
	font-size: 20px;
}

А на абзаца задайте размер от 2em. Тази стойност съответства на шрифт два пъти по-голям от размера на шрифта на родителя:

p {
	font-size: 2em; /* съответства на 40px */
}

Сега на абзаца задайте размер от 0.5em. Тази стойност съответства на половината от размера на шрифта на родителя:

p {
	font-size: 0.5em; /* съответства на 10px */
}

Стойността 1em ще направи шрифта на абзаца същият като този на родителския div:

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