Wprowadzenie do jednostek em w CSS

Jednostki em pozwalają ustawić rozmiar czcionki w procentach od rozmiaru rodzica. Spójrzmy na przykład.

Załóżmy, że mamy takie zagnieżdżone tagi:

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

Ustawmy rozmiar czcionki naszemu divowi:

div {
	font-size: 20px;
}

A paragrafowi ustawmy rozmiar na 2em. Ta wartość odpowiada czcionce dwa razy większej od rozmiaru czcionki rodzica:

p {
	font-size: 2em; /* odpowiada 40px */
}

A teraz paragrafowi ustawmy rozmiar na 0.5em. Ta wartość odpowiada połowie rozmiaru czcionki rodzica:

p {
	font-size: 0.5em; /* odpowiada 10px */
}

Wartość 1em sprawi, że czcionka paragrafu będzie taka sama, jak u rodzica div:

p {
	font-size: 1em; /* odpowiada 20px */
}

Zadania praktyczne

Załóżmy, że mamy kod HTML, dla którego będziemy rozwiązywać zadania:

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

Określ, jaki rozmiar czcionki w px będą miały tagi li w wyniku wykonania następującego kodu:

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

Określ, jaki rozmiar czcionki w px będą miały tagi li w wyniku wykonania następującego kodu:

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

Określ, jaki rozmiar czcionki w px będą miały tagi li w wyniku wykonania następującego kodu:

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