Vipinga na Vitengo vya em katika CSS

Hebu tuwe na vitambulishi vifuatavyo:

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

Hebu ukubwa wa herufi ya aya upewe katika px:

p {
	font-size: 20px;
}

Wacha tuweke kingo ya aya hii kwenye vitengo em. Katika kesi hii ukubwa wa kingo utahesabiwa kutoka kwa ukubwa wa herufi ya aya, sio ya kitu kizazi:

p {
	font-size: 20px;
	margin: 2em;  /* inafanana na 40px */
}

Hebu sasa aya ipewe ukubwa katika em:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* inafanana na 40px */
}

Wacha tuweke tena margin kwa kipengele chetu. Katika kesi hii bado itahesabiwa kutoka kwa thamani ya sasa ya herufi ya kipengele yenyewe. Wakati thamani ya herufi yenyewe itahesabiwa kuhusiana na kitu kizazi:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* inafanana na 40px */
	margin: 2em;    /* inafanana na 80px */
}

Kazi za Vitendo

Hebu tuwe na msimbo wa HTML, ambao tutatatia kazi:

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

Amua, ukubwa gani wa herufi na kingo katika px vitakuwa na vitambulishi div kutokana na utekelezaji wa msimbo ufuatavyo:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
	margin: 2em;
}

Amua, ukubwa gani wa herufi na kingo katika px vitakuwa na vitambulishi div kutokana na utekelezaji wa msimbo ufuatavyo:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
	margin: 3em;
}

Amua, ukubwa gani wa herufi na kingo katika px vitakuwa na vitambulishi div kutokana na utekelezaji wa msimbo ufuatavyo:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
	margin: 0.5em;
}

Amua, ukubwa gani wa herufi na kingo katika px vitakuwa na vitambulishi p kutokana na utekelezaji wa msimbo ufuatao:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
}
p {
	font-size: 2em;
	margin: 2em;
}

Amua, ukubwa gani wa herufi na kingo katika px vitakuwa na vitambulishi p kutokana na utekelezaji wa msimbo ufuatao:

section {
	font-size: 10px;
}
div {
	font-size: 1.5em;
}
p {
	font-size: 1em;
	margin: 1.5em;
}