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:

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

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

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

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

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

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

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

Praktiske oppgaver

La oss si at vi har HTML-kode som vi skal løse oppgaver 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;
}