Увод у em јединице у CSS-у

Јединице em омогућавају да се величина фонта постави у процентима у односу на величину родитеља. Хајде да погледамо на примеру.

Претпоставимо да имамо следеће угњежђене тагове:

<div>
	<p>
		текст
	</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>текст</li>
	<li>текст</li>
	<li>текст</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;
}