Introduktion till em-enheter i CSS

Enheten em låter dig ställa in teckenstorleken i procent av förälderns storlek. Låt oss titta på ett exempel.

Anta att vi har kapslade taggar som dessa:

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

Låt oss ställa in teckenstorleken för vår div:

div {
	font-size: 20px;
}

Och för stycket ställer vi in storleken till 2em. Detta värde motsvarar en teckenstorlek som är dubbelt så stor som förälderns teckenstorlek:

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

Och nu sätter vi styckets storlek till 0.5em. Detta värde motsvarar hälften av förälderns teckenstorlek:

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

Värdet 1em kommer att göra styckets teckenstorlek lika stor som förälderns div:

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

Praktiska uppgifter

Anta att vi har HTML-kod, för vilken vi kommer att lösa uppgifter:

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

Bestäm vilken teckenstorlek i px taggarna li kommer att ha som ett resultat av följande kod:

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

Bestäm vilken teckenstorlek i px taggarna li kommer att ha som ett resultat av följande kod:

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

Bestäm vilken teckenstorlek i px taggarna li kommer att ha som ett resultat av följande kod:

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