Einrückungen und em-Einheiten in CSS

Nehmen wir an, wir haben die folgenden Tags:

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

Nehmen wir an, die Schriftgröße des Absatzes ist in px angegeben:

p {
	font-size: 20px;
}

Lassen Sie uns den Rand dieses Absatzes in Einheiten von em festlegen. In diesem Fall wird die Größe des Abstands von der Schriftgröße des Absatzes berechnet und nicht von seinem Elternelement:

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

Nehmen wir nun an, dass für den Absatz eine Größe in em festgelegt ist:

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

Lassen Sie uns wieder margin für unser Element festlegen. In diesem Fall wird es weiterhin vom aktuellen Schriftwert des Elements selbst berechnet. Dabei wird der Schriftwert selbst relativ zum Elternelement berechnet:

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

Praktische Aufgaben

Nehmen wir an, wir haben einen HTML-Code, für den wir Aufgaben lösen werden:

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

Bestimmen Sie, welche Schriftgröße und welcher Abstand in px die Tags div als Ergebnis der Ausführung des folgenden Codes haben werden:

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

Bestimmen Sie, welche Schriftgröße und welcher Abstand in px die Tags div als Ergebnis der Ausführung des folgenden Codes haben werden:

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

Bestimmen Sie, welche Schriftgröße und welcher Abstand in px die Tags div als Ergebnis der Ausführung des folgenden Codes haben werden:

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

Bestimmen Sie, welche Schriftgröße und welcher Abstand in px die Tags p als Ergebnis der Ausführung des folgenden Codes haben werden:

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

Bestimmen Sie, welche Schriftgröße und welcher Abstand in px die Tags p als Ergebnis der Ausführung des folgenden Codes haben werden:

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