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:

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

Keling, div elementimizga shrift o‘lchamini belgilaymiz:

div {
	font-size: 20px;
}

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

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

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

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

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

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

Amaliy masalalar

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

<ul>
	<li>matn</li>
	<li>matn</li>
	<li>matn</li>
</ul>

Quyidagi kod bajarish natijasida li teglari qanday px shrift o‘lchamiga ega bo‘lishini aniqlang:

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

Quyidagi kod bajarish natijasida li teglari qanday px shrift o‘lchamiga ega bo‘lishini aniqlang:

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

Quyidagi kod bajarish natijasida li teglari qanday px shrift o‘lchamiga ega bo‘lishini aniqlang:

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}