Indryk og em-enheder i CSS

Lad os sige, at vi har følgende tags:

<div>
	<p>
		tekst
	</p>
</div>

Lad os sige, at skriftstørrelsen på afsnittet er angivet i px:

p {
	font-size: 20px;
}

Lad os indstille margenen på dette afsnit i enheder em. I dette tilfælde vil størrelsen på indrykket blive beregnet ud fra skriftstørrelsen på afsnittet og ikke dets forælder:

p {
	font-size: 20px;
	margin: 2em;  /* svarer til 40px */
}

Lad os nu sige, at afsnittet får tildelt en størrelse i em:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* svarer til 40px */
}

Lad os igen angive margin for vores element. I dette tilfælde vil det stadig blive beregnet ud fra den aktuelle skriftstørrelse på selve elementet. Mens selve skriftstørrelsesværdien vil blive beregnet i forhold til forælderen:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* svarer til 40px */
	margin: 2em;    /* svarer til 80px */
}

Praktiske opgaver

Lad os sige, at vi har HTML-kode, som vi vil løse opgaver for:

<section>
	<div>
		<p>
			tekst
		</p>
	</div>
</section>

Bestem, hvilken skriftstørrelse og indryk i px tagsene div vil have som resultat af udførelsen af følgende kode:

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

Bestem, hvilken skriftstørrelse og indryk i px tagsene div vil have som resultat af udførelsen af følgende kode:

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

Bestem, hvilken skriftstørrelse og indryk i px tagsene div vil have som resultat af udførelsen af følgende kode:

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

Bestem, hvilken skriftstørrelse og indryk i px tagsene p vil have som resultat af udførelsen af følgende kode:

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

Bestem, hvilken skriftstørrelse og indryk i px tagsene p vil have som resultat af udførelsen af følgende kode:

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