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

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

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

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

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

div {
	font-size: 20px;
}

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

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

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

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

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

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