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

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

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

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

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

div {
	font-size: 20px;
}

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

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

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

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

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

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

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

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

<ul>
	<li>матн</li>
	<li>матн</li>
	<li>матн</li>
</ul>

Куйидаги код натижасида li тегларининг шрифт ўлчами px да қандай бўлишини аниқланг:

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

Куйидаги код натижасида li тегларининг шрифт ўлчами px да қандай бўлишини аниқланг:

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

Куйидаги код натижасида li тегларининг шрифт ўлчами px да қандай бўлишини аниқланг:

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