Inleiding tot em-eenhede in CSS

Die em-eenhede laat jou toe om die lettergrootte te spesifiseer as 'n persentasie van die ouer se grootte. Kom ons kyk na 'n voorbeeld.

Gestel ons het die volgende geneste merkers:

html<div>
  <p>
    teks
  </p>
</div>

Laat ons die lettergrootte vir ons div spesifiseer:

cssdiv {
  font-size: 20px;
}

En vir die paragraaf spesifiseer ons die grootte in 2em. Hierdie waarde kom ooreen met 'n lettergrootte twee keer so groot as die ouer se lettergrootte:

cssp {
  font-size: 2em; /* kom ooreen met 40px */
}

Nou spesifiseer ons vir die paragraaf 'n grootte van 0.5em. Hierdie waarde kom ooreen met die helfte van die ouer se lettergrootte:

cssp {
  font-size: 0.5em; /* kom ooreen met 10px */
}

Die waarde 1em sal die paragraaf se lettergrootte dieselfde maak as dié van die ouer div:

cssp {
  font-size: 1em; /* kom ooreen met 20px */
}

Praktiese Take

Gestel ons het die volgende HTML-kode, waarvoor ons die take sal oplos:

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