Отстъпи и мерни единици 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;
}

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

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