Uvod u CSS em jedinice

Em jedinice omogućavaju da postavite veličinu fonta u procentima od veličine roditeljskog elementa. Hajde da pogledamo na primeru.

Recimo da imamo sledeće ugnježdene tagove:

<div>
	<p>
		tekst
	</p>
</div>

Hajde da postavimo veličinu fonta našem div-u:

div {
	font-size: 20px;
}

A pasusu postavimo veličinu na 2em. Ova vrednost odgovara fontu dva puta većem od veličine fonta roditelja:

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

A sada pasusu postavimo veličinu na 0.5em. Ova vrednost odgovara polovini veličine fonta roditelja:

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

Vrednost 1em će učiniti da font pasusa bude isti kao i kod roditeljskog div-a:

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

Praktični zadaci

Recimo da imamo HTML kod, za koji ćemo rešavati zadatke:

<ul>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
</ul>

Odredite, koja veličina fonta u px će imati tagovi li kao rezultat izvršavanja sledećeg koda:

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

Odredite, koja veličina fonta u px će imati tagovi li kao rezultat izvršavanja sledećeg koda:

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

Odredite, koja veličina fonta u px će imati tagovi li kao rezultat izvršavanja sledećeg koda:

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