Unterschied zwischen den CSS-Einheiten em und rem - Tipps für Einsteiger
Geschrieben am:
Häufig nutzt man in CSS die Einheit rem, man verwendet sie für die Schriftgröße, aber auch für Abstände oder die Ausmaße von Elementen. Aber wofür steht rem eigentlich und was ist der Unterschied zu em?
rem steht für "root em" und bezieht sich auf die Schriftgröße, die bei dem html-Element festgelegt ist. Das html-Element ist das oberste in der Hierarchie eines HTML-Dokuments und damit das Wurzel-Element (root).
Text und Schrift sind die zentralen Komponenten von Webseiten und so ist es sinnvoll, wenn sich Abstände und Ausmaße von Elementen an der Schrift orientieren. Wenn nichts geändert wurde - weder durch ein Stylesheet noch in den Browsereinstellungen der Benutzenden - kann man davon ausgehen, dass 1rem genauso groß ist wie 16px. 2rem würden dann 32px entsprechen, 1.5rem 24px etc.
Neben rem gibt es auch em. Das bezieht sich hingegen nicht auf die Schriftgröße des html-Elements, sondern auf die Schriftgröße des aktuellen Elements. Und das kann bei Verschachtelungen zu komischen Phänomenen, aka als Problemen, führen.
Angenommen, ich habe eine harmlose kleine verschachtelte Liste.
<ul>
<li>Eins</li>
<li>Eins</li>
<li>Eins</li>
<li>Eins
<ul>
<li>Innere Liste</li>
<li>Innere Liste</li>
<li>Innere Liste</li>
<li>Innere Liste</li>
</ul>
</li>
</ul>Und ich definiere die Schriftgröße der li-Elemenete in em:
li {
font-size: 0.8em;
}... dann zeigt sich deutlich, dass die innere Liste eine kleinere Schrift hat als die äußere Liste.
Denn em bezieht sich immer auf die aktuelle Schriftgröße. Bei der äußeren Liste gilt für die Größe: 0.8 von 16px, macht 12.8px.
Bei der inneren Liste gilt die bei der äußeren Liste bestimmte Schriftgröße, da die Schriftgröße vererbt wird. Damit berechnet sich die Schriftgröße der inneren Liste über 0.8 von 12.8px, macht also 10.24px.
Und genau das macht das Handling mit em manchmal mühsam. Das Problem tritt nicht auf, wenn man statt em die Schriftgröße in rem festlegt.
li {
font-size: 0.8rem;
}Dann ist die Schrift der äußeren und der inneren Liste gleich groß, weil sich die 0.8 immer auf die Schriftgröße des html-Elements beziehen.
Das Beispiel gibts auch zum Liveausprobieren bei CodePen.
- Solche und mehr Tipps gibt’s auch in meinem HTML & CSS-Buch