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