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