Zamiki in em enote v CSS

Recimo, da imamo naslednje oznake:

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

Naj bo velikost pisave odstavka nastavljena v px:

p {
	font-size: 20px;
}

Nastavimo rob tega odstavka v enotah em. V tem primeru se bo velikost zamika izračunala od velikosti pisave odstavka, ne od njegovega starša:

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

Recimo, da je zdaj odstavku določena velikost v em:

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

Ponovno nastavimo margin našemu elementu. V tem primeru se bo še vedno izračunal od trenutne vrednosti pisave samega elementa. Pri tem pa se bo sama vrednost pisave izračunala glede na starša:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* ustreza 40px */
	margin: 2em;    /* ustreza 80px */
}

Praktične naloge

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

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

Določite, kakšno velikost pisave in zamika v px bodo imele oznake div v rezultatu izvajanja naslednje kode:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
	margin: 2em;
}

Določite, kakšno velikost pisave in zamika v px bodo imele oznake div v rezultatu izvajanja naslednje kode:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
	margin: 3em;
}

Določite, kakšno velikost pisave in zamika v px bodo imele oznake div v rezultatu izvajanja naslednje kode:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
	margin: 0.5em;
}

Določite, kakšno velikost pisave in zamika v px bodo imele oznake p v rezultatu izvajanja naslednje kode:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
}
p {
	font-size: 2em;
	margin: 2em;
}

Določite, kakšno velikost pisave in zamika v px bodo imele oznake p v rezultatu izvajanja naslednje kode:

section {
	font-size: 10px;
}
div {
	font-size: 1.5em;
}
p {
	font-size: 1em;
	margin: 1.5em;
}