Sissejuhatus CSSi em-ühikutesse

em-ühikud võimaldavad määrata fondi suuruse protsentides vanemaelemendi suurusest. Vaatame seda näite varal.

Oletame, et meil on sellised pesastatud elemendid:

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

Määrame oma div-elemendile fondi suuruse:

cssdiv {
  font-size: 20px;
}

Ja lõigule määrame suuruseks 2em. See väärtus vastab fondi suurusele, mis on kaks korda suurem vanemaelemendi fondi suurusest:

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

Nüüd määrame lõigule suuruseks 0.5em. See väärtus vastab poolele vanemaelemendi fondi suurusest:

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

Väärtus 1em muudab lõigu fondi suuruse samasuguseks nagu vanema div-i oma:

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

Praktilised ülesanded

Oletame, et meil on HTML-kood, mille jaoks me lahendame ülesandeid:

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