Įvadas į em vienetus CSS

em vienetai leidžia nustatyti šrifto dydį procentais nuo tėvinio elemento dydžio. Pažiūrėkime pavyzdžiu.

Tarkime, kad turime šiuos įdėtus tag'us:

html<div>
  <p>
    text
  </p>
</div>

Nustatykime šrifto dydį mūsų div'ui:

cssdiv {
  font-size: 20px;
}

O pastraipai nustatykime dydį 2em. Ši reikšmė atitinka šriftą dvigubai didesnį už tėvinio elemento šrifto dydį:

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

O dabar pastraipai nustatykime dydį 0.5em. Ši reikšmė atitinka pusę tėvinio elemento šrifto dydžio:

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

Reikšmė 1em padarys pastraipos šriftą tokį patį, kaip ir tėvinio div'o:

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

Praktinės užduotys

Tarkime, kad turime HTML kodą, kuriam mes spręsime užduotis:

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