Наследување и единици em во CSS

Сега да претпоставиме дека имаме подлабоко вгнездување:

<main>
	<div>
		<p>
			text
		</p>
	</div>
</main>

Да претпоставиме дека тагот main има следнава големина на фонтот:

main {
	font-size: 10px;
}

На тагот div ќе поставиме големина на фонтот во em:

div {
	font-size: 2em; /* одговара на 20px */
}

На параграфот исто така ќе поставиме големина на фонтот во em. Во овој случај, тој ќе ја пресметува својата големина во однос на веќе пресметаната големина на фонтот на div-от:

p {
	font-size: 2em; /* одговара на 40px */
}

Практични задачи

Да претпоставиме дека имаме HTML код, за кој ќе решаваме задачи:

<section>
	<div>
		<p>
			text
		</p>
	</div>
</section>

Определете каква големина на фонтот во px ќе имаат div елементите како резултат на извршувањето на следниот код:

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

Определете каква големина на фонтот во px ќе имаат параграфите како резултат на извршувањето на следниот код:

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

section {
	font-size: 40px;
}
div {
	font-size: 0.5em;
}
p {
	font-size: 0.5em;
}