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

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

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}