CSSда em бирликларига кириш

em бирликлари шрифт ўлчамини ота-она элементнинг ўлчамидан фоизда белгилашга имкон беради. Келинг, мисолда кўрамиз.

Бизда куйидаги ичма-ич теглар бор деб фараз қилайлик:

html<div>
  <p>
    матн
  </p>
</div>

Келинг, дивимизга шрифт ўлчамини белгилаб берайлик:

cssdiv {
  font-size: 20px;
}

Абзацга эса ўлчамни 2em да белгилаймиз. Бу қиймат ота-она элементнинг шрифт ўлчамидан икки марта катта шрифтга мос келади:

cssp {
  font-size: 2em; /* 40px га мос келади */
}

Энди абзацга ўлчамни 0.5em да белгилаймиз. Бу қиймат ота-она элементнинг шрифт ўлчамининг ярмига мос келади:

cssp {
  font-size: 0.5em; /* 10px га мос келади */
}

1em қиймати абзац шрифтини ота-она дивиники каби қилади:

cssp {
  font-size: 1em; /* 20px га мос келади */
}

Амалий машқлар

Биз машқларни ечадиган бўлган HTML кодимиз бор деб фараз қилайлик:

html<ul>
  <li>матн</li>
  <li>матн</li>
  <li>матн</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;
}