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:

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

Lad os angive en skriftstørrelse til vores div:

cssdiv {
  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:

cssp {
  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:

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

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

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

Praktiske opgaver

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

html<ul>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</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;
}