CSSda em birliklari kirishi

em birliklari shrift o‘lchamini ota elementning o‘lchamidan foiz sifatida belgilashga imkon beradi. Keling, buni misol bilan ko'ramiz.

Faraz qilaylik, bizda ichma-ich joylashgan quyidagi teglar mavjud:

html<div>
  <p>
    matn
  </p>
</div>

Keling, div elementimizga shrift o‘lchamini belgilaymiz:

cssdiv {
  font-size: 20px;
}

Paragrafga 2em o‘lchamini belgilaymiz. Bu qiymat ota elementning shrift o‘lchamidan ikki baravar katta shriftga mos keladi:

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

Endi paragrafga 0.5em o‘lchamini belgilaymiz. Bu qiymat ota elementning shrift o‘lchamining yarmiga teng:

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

1em qiymati paragraf shriftini ota div elementining shrifti bilan bir xil qiladi:

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

Amaliy masalalar

Faraz qilaylik, bizda masalalarni yechishimiz uchun quyidagi HTML kodi mavjud:

html<ul>
  <li>matn</li>
  <li>matn</li>
  <li>matn</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;
}