CSS-те em бірліктеріне кіріспе

em бірліктері мәтін мөлшерін әке элементтің мөлшерінен пайызбен белгілеуге мүмкіндік береді. Мысалға қарайық.

Бізде келесідей ішке қайталанған тегтер бар делік:

html<div>
  <p>
    мәтін
  </p>
</div>

div элементімізге мәтін мөлшерін белгілейік:

cssdiv {
  font-size: 20px;
}

Ал абзацқа 2em мөлшерін белгілейік. Бұл мән әке элементтің мәтін мөлшерінен екі есе үлкен мәтін мөлшеріне сәйкес келеді:

cssp {
  font-size: 2em; /* 40px сәйкес келеді */
}

Енді абзацқа 0.5em мөлшерін белгілейік. Бұл мән әке элементтің мәтін мөлшерінің жартысына сәйкес келеді:

cssp {
  font-size: 0.5em; /* 10px сәйкес келеді */
}

1em мәні абзац мәтінінің мөлшерін әке div элементінің мөлшерімен бірдей етеді:

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