Ievads em vienībās CSS

em vienības ļauj iestatīt fonta izmēru procentos no vecāka elementa izmēra. Apskatīsim piemērā.

Pieņemsim, ka mums ir šādi ligzdotie tagi:

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

Iestatīsim mūsu div elementam fonta izmēru:

cssdiv {
  font-size: 20px;
}

Un rindkopai iestatīsim izmēru 2em. Šī vērtība atbilst fonta izmēram, kas ir divas reizes lielāks par vecāka elementa fonta izmēru:

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

Tagad rindkopai iestatīsim izmēru 0.5em. Šī vērtība atbilst pusei no vecāka elementa fonta izmēra:

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

Vērtība 1em padarīs rindkopas fonta izmēru tādu pašu kā vecākā div elementa:

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

Praktiskie uzdevumi

Pieņemsim, ka mums ir HTML kods, kuram mēs risināsim uzdevumus:

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;
}