Наследяване и 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;
}

Определете какъв размер на шрифта в px ще имат абзаците в резултат на изпълнение на следния код:

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