Uvod v enote em v CSS

Enote em omogočajo določitev velikosti pisave v odstotkih glede na velikost starševskega elementa. Poglejmo si primer.

Recimo, da imamo naslednje gnezdene oznake:

<div>
	<p>
		besedilo
	</p>
</div>

Določimo velikost pisave za naš div:

div {
	font-size: 20px;
}

Za odstavek pa določimo velikost v 2em. Ta vrednost ustreza pisavi, ki je dvakrat večja od velikosti pisave starša:

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

Zdaj pa določimo velikost odstavka na 0.5em. Ta vrednost ustreza polovici velikosti pisave starša:

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

Vrednost 1em bo naredila pisavo odstavka enako kot pri starševskem divu:

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

Praktične naloge

Recimo, da imamo HTML kodo, za katero bomo reševali naloge:

<ul>
	<li>besedilo</li>
	<li>besedilo</li>
	<li>besedilo</li>
</ul>

Določite, kakšno velikost pisave v px bodo imele oznake li kot rezultat izvajanja naslednje kode:

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

Določite, kakšno velikost pisave v px bodo imele oznake li kot rezultat izvajanja naslednje kode:

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

Določite, kakšno velikost pisave v px bodo imele oznake li kot rezultat izvajanja naslednje kode:

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