CSS-de em birliklerine giriş

em birlikleri ýazgynyň ölçegini ata-enanyň ölçeginiň göteriminde belläp bermege mümkinçilik berýär. Geliň mysalda göreliň.

Gowy, bizde iç-içe geçen şeýle tegler bar diýeliň:

<div>
	<p>
		tekst
	</p>
</div>

Geliň, div-yzyza ýazgy ölçegini bereliň:

div {
	font-size: 20px;
}

Abzas-a bolsa ölçegi 2em bereliň. Bu görkezijiler ata-enanyň ýazgy ölçeginden iki esse uly ýazgy ölçegine gabat gelýär:

p {
	font-size: 2em; /* 40px gabat gelýär */
}

Indi abzasa ölçegi 0.5em bereliň. Bu görkeziji ata-enanyň ýazgy ölçeginiň ýarysyna gabat gelýär:

p {
	font-size: 0.5em; /* 10px gabat gelýär */
}

1em görkezijisi abzasyň ýazgy ölçegini ata-enanyň div-yndaky ýaly eder:

p {
	font-size: 1em; /* 20px gabat gelýär */
}

Amaly meseleler

Gowy, bizde meseleleri çözeris üçin HTML kody bar:

<ul>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
</ul>

Aşakdaky kody ýerine ýetiren netijesinde li tegleriň px ýazgy ölçegi näçe bolar, kesgitleň:

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

Aşakdaky kody ýerine ýetiren netijesinde li tegleriň px ýazgy ölçegi näçe bolar, kesgitleň:

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

Aşakdaky kody ýerine ýetiren netijesinde li tegleriň px ýazgy ölçegi näçe bolar, kesgitleň:

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