Utangulizi wa Vitengo vya em katika CSS

Vitengo vya em huruhusu kubainisha ukubwa wa herufi kama asilimia ya ukubwa wa kiumzazi. Hebu tuangalie kwa mfano.

Tuchukulie tuna vitovi vilivyowekwa kama ifuatavyo:

<div>
	<p>
		maandishi
	</p>
</div>

Wacha tubainishe ukubwa wa herufi kwa div yetu:

div {
	font-size: 20px;
}

Na kwa aya tupatie ukubwa wa 2em. Thamani hii inalingana na herufi kubwa mara mbili ya ukubwa wa herufi ya kiumzazi:

p {
	font-size: 2em; /* inalingana na 40px */
}

Sasa aya tupatie ukubwa wa 0.5em. Thamani hii inalingana na nusu ya ukubwa wa herufi ya kiumzazi:

p {
	font-size: 0.5em; /* inalingana na 10px */
}

Thamani 1em itafanya ukubwa wa herufi ya aya uwe sawa na ule wa div ya kiumzazi:

p {
	font-size: 1em; /* inalingana na 20px */
}

Kazi Za Vitendo

Tuchukulie tuna msimbo wa HTML, ambao tutatumia kutatua kazi:

<ul>
	<li>maandishi</li>
	<li>maandishi</li>
	<li>maandishi</li>
</ul>

Bainisha, ni ukubwa upi wa herufi katika px utakuwapo kwenye vitovi li kutokana na utekelezaji wa msimbo ufuatao:

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

Bainisha, ni ukubwa upi wa herufi katika px utakuwapo kwenye vitovi li kutokana na utekelezaji wa msimbo ufuatao:

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

Bainisha, ni ukubwa upi wa herufi katika px utakuwapo kwenye vitovi li kutokana na utekelezaji wa msimbo ufuatao:

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