Einführung in em-Einheiten in CSS

Die Einheit em ermöglicht es, die Schriftgröße in Prozent von der Größe des Elternelements festzulegen. Lasst uns das an einem Beispiel betrachten.

Nehmen wir an, wir haben die folgenden verschachtelten Tags:

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

Lasst uns die Schriftgröße für unser div festlegen:

div {
	font-size: 20px;
}

Und für den Absatz legen wir die Größe auf 2em fest. Dieser Wert entspricht einer Schriftgröße, die doppelt so groß ist wie die Schriftgröße des Elternelements:

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

Legen wir nun für den Absatz die Größe auf 0.5em fest. Dieser Wert entspricht der Hälfte der Schriftgröße des Elternelements:

p {
	font-size: 0.5em; /* entspricht 10px */
}

Der Wert 1em macht die Schriftgröße des Absatzes genauso groß wie die des übergeordneten div:

p {
	font-size: 1em; /* entspricht 20px */
}

Praktische Aufgaben

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

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

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

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

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

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

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

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}