Introduksjon til em-enheter i CSS

Enhetene em lar deg sette skriftstørrelse i prosent av forelderens størrelse. La oss se på et eksempel.

La oss si at vi har nestede tagger som disse:

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

La oss sette skriftstørrelsen for div-en vår:

div {
	font-size: 20px;
}

Og for avsnittet setter vi størrelsen til 2em. Dette verdien tilsvarer en skriftstørrelse to ganger større enn forelderens skriftstørrelse:

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

La oss nå sette avsnittets størrelse til 0.5em. Denne verdien tilsvarer halvparten av størrelsen av forelderens skriftstørrelse:

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

Verdien 1em vil gjøre avsnittets skriftstørrelse lik som på forelderens div:

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

Praktiske oppgaver

La oss si at vi har HTML-kode som vi skal løse oppgaver for:

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

Bestem hvilken skriftstørrelse i px li-taggene vil ha som et resultat av følgende kode:

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

Bestem hvilken skriftstørrelse i px li-taggene vil ha som et resultat av følgende kode:

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

Bestem hvilken skriftstørrelse i px li-taggene vil ha som et resultat av følgende kode:

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