Sissejuhatus CSSi em-ühikutesse

em-ühikud võimaldavad määrata fondi suuruse protsentides vanemaelemendi suurusest. Vaatame seda näite varal.

Oletame, et meil on sellised pesastatud elemendid:

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

Määrame oma div-elemendile fondi suuruse:

div {
	font-size: 20px;
}

Ja lõigule määrame suuruseks 2em. See väärtus vastab fondi suurusele, mis on kaks korda suurem vanemaelemendi fondi suurusest:

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

Nüüd määrame lõigule suuruseks 0.5em. See väärtus vastab poolele vanemaelemendi fondi suurusest:

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

Väärtus 1em muudab lõigu fondi suuruse samasuguseks nagu vanema div-i oma:

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

Praktilised ülesanded

Oletame, et meil on HTML-kood, mille jaoks me lahendame ülesandeid:

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

Määrake, millise fondi suurusega px on li elemendid järgneva koodi tulemusena:

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

Määrake, millise fondi suurusega px on li elemendid järgneva koodi tulemusena:

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

Määrake, millise fondi suurusega px on li elemendid järgneva koodi tulemusena:

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