Inleiding tot em-eenheden in CSS

De em-eenheden stellen je in staat de lettergrootte in te stellen als een percentage van de grootte van het bovenliggende element. Laten we een voorbeeld bekijken.

Stel dat we geneste tags hebben zoals deze:

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

Laten we de lettergrootte voor onze div instellen:

div {
	font-size: 20px;
}

En voor de paragraaf stellen we de grootte in op 2em. Deze waarde komt overeen met een lettergrootte die twee keer zo groot is als de lettergrootte van het bovenliggende element:

p {
	font-size: 2em; /* komt overeen met 40px */
}

Laten we nu de grootte voor de paragraaf instellen op 0.5em. Deze waarde komt overeen met de helft van de grootte van de lettergrootte van het bovenliggende element:

p {
	font-size: 0.5em; /* komt overeen met 10px */
}

Een waarde van 1em zorgt ervoor dat de lettergrootte van de paragraaf hetzelfde is als die van de bovenliggende div:

p {
	font-size: 1em; /* komt overeen met 20px */
}

Praktische opdrachten

Stel dat we HTML-code hebben waarvoor we opdrachten gaan oplossen:

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

Bepaal welke lettergrootte in px de li-tags zullen hebben als resultaat van de volgende code:

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

Bepaal welke lettergrootte in px de li-tags zullen hebben als resultaat van de volgende code:

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

Bepaal welke lettergrootte in px de li-tags zullen hebben als resultaat van de volgende code:

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