Inspringen en em-eenheden in CSS

Stel dat we de volgende tags hebben:

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

Stel dat de lettergrootte van de alinea is ingesteld in px:

p {
	font-size: 20px;
}

Laten we de marge van deze alinea instellen in eenheden em. In dit geval wordt de grootte van de inspringing berekend op basis van de lettergrootte van de alinea, en niet van het bovenliggende element:

p {
	font-size: 20px;
	margin: 2em;  /* komt overeen met 40px */
}

Stel dat de alinea nu een grootte heeft gekregen in em:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* komt overeen met 40px */
}

Laten we opnieuw de margin van ons element instellen. In dit geval zal het nog steeds worden berekend op basis van de huidige lettergrootte van het element zelf. Terwijl de lettergrootte zelf wordt berekend ten opzichte van het bovenliggende element:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* komt overeen met 40px */
	margin: 2em;    /* komt overeen met 80px */
}

Praktische opdrachten

Stel dat we HTML-code hebben, waarvoor we opdrachten gaan oplossen:

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

Bepaal welke lettergrootte en inspringing in px de tags div zullen hebben als resultaat van de volgende code:

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

Bepaal welke lettergrootte en inspringing in px de tags div zullen hebben als resultaat van de volgende code:

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

Bepaal welke lettergrootte en inspringing in px de tags div zullen hebben als resultaat van de volgende code:

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

Bepaal welke lettergrootte en inspringing in px de tags p zullen hebben als resultaat van de volgende code:

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

Bepaal welke lettergrootte en inspringing in px de tags p zullen hebben als resultaat van de volgende code:

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