Introduktion til em-enheder i CSS

Enhederne em tillader dig at angive skriftstørrelsen i procent af forælderens størrelse. Lad os se på et eksempel.

Lad os sige, at vi har nestede tags som disse:

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

Lad os angive en skriftstørrelse til vores div:

div {
	font-size: 20px;
}

Og til paragraffen angiver vi en størrelse på 2em. Denne værdi svarer til en skriftstørrelse to gange større end forælderens skriftstørrelse:

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

Lad os nu angive en størrelse på 0.5em til paragraffen. Denne værdi svarer til halvdelen af forælderens skriftstørrelse:

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

Værdien 1em vil gøre paragrafens skriftstørrelse den samme som forælderens div:

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

Praktiske opgaver

Lad os sige, at vi har HTML-kode, som vi vil løse opgaver for:

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

Bestem, hvilken skriftstørrelse i px li-tagsene vil have som et resultat af udførelsen af følgende kode:

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

Bestem, hvilken skriftstørrelse i px li-tagsene vil have som et resultat af udførelsen af følgende kode:

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

Bestem, hvilken skriftstørrelse i px li-tagsene vil have som et resultat af udførelsen af følgende kode:

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