Вдолжувања и единици em во CSS

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

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

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

p {
	font-size: 20px;
}

Ајде да го поставиме маргиналот на овој параграф во единици em. Во овој случај, големината на вдолжувањето ќе се пресметува од големината на фонтот на параграфот, а не од неговиот родител:

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

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

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

Ајде повторно да го поставиме margin на нашиот елемент. Во овој случај, тој сепак ќе се пресметува од тековната вредност на фонтот на самиот елемент. Притоа, самата вредност на фонтот ќе се пресметува во однос на родителот:

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

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

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

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

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

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

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

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

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

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

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