Johdatus CSS-em-yksiköihin

em-yksiköt antavat mahdollisuuden asettaa fontin koon prosentteina vanhemman elementin koosta. Katsotaanpa sitä esimerkin avulla.

Oletetaan, että meillä on tällaisia sisäkkäisiä tunnisteita:

<div>
	<p>
		teksti
	</p>
</div>

Asetetaan fontin koko div-elementillemme:

div {
	font-size: 20px;
}

Ja asetetaan kappaleelle koko 2em. Tämä arvo vastaa fonttikokoa, joka on kaksi kertaa vanhemman elementin fontin koko:

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

Asetetaan nyt kappaleelle koko 0.5em. Tämä arvo vastaa puolta vanhemman elementin fontin koosta:

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

Arvo 1em tekee kappaleen fontin koosta samankokoisen kuin vanhemman div-elementin:

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

Käytännön tehtävät

Oletetaan, että meillä on HTML-koodi, jolle me ratkaisemme tehtäviä:

<ul>
	<li>teksti</li>
	<li>teksti</li>
	<li>teksti</li>
</ul>

Määritä, mikä fontin koko px:nä li-tunnisteilla on seuraavan koodin suorittamisen tuloksena:

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

Määritä, mikä fontin koko px:nä li-tunnisteilla on seuraavan koodin suorittamisen tuloksena:

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

Määritä, mikä fontin koko px:nä li-tunnisteilla on seuraavan koodin suorittamisen tuloksena:

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