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:

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

Asetetaan fontin koko div-elementillemme:

cssdiv {
  font-size: 20px;
}

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

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

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

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

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

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

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

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

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

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

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

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