Das CSS Attribut „em“ verstehen

Viele Entwickler vertrauen ausschließlich auf Pixel-Werte um Abmessungen in CSS zu definieren. Ich glaube, viele von uns (meine Mitarbeiter eingeschlossen) verstehen noch immer nicht so recht, was em eigentlich bedeutet. Dabei ist die Spezifikation recht einfach:

Entspricht dem berechneten Wert des ‘font-size’ Attributs des Elements wo es benutzt wird.

Wenn Sie also folgenden CSS Code schreiben

.element {
  font-size: 20px;
}

dann entspricht 1em, innerhalb dieses Elements oder innerhalb eines der Kind-Elemente, genau 20 Pixel. Glauben Sie nicht? Probieren Sie es aus! Folgender Code

.element {
  font-size: 20px;
  width: 4em;
  height: 4em;
}

bewirkt daß Höhe und Breite des Elements jeweils 80 Pixel beträgt (nämlich 4 × 20 Pixel).

Der Schlüssel zum Verständis dieser Einheit liegt darin, zu begreifen worauf em eigentlich basiert. Dieser Wikipedia Artikel erklärt es:

Die Maßeinheit em wird im Schriftsatz zur Bestimmung der Zeichenbreite in Abhängigkeit von der Schriftgröße verwendet. Ein em entspricht der Breite eines Gevierts (engl. quad) des Druckwesens.

Im Artikel wird weiter ausgeführt daß, obwohl die Einheit ursprünglich auf der Breite des Buchstabens M basierte, dies im CSS-Standard nicht mehr so ist. Vielmehr basiert sie in CSS auf der aktuellen Schriftgröße in Pixel.

Was aber, wenn die Schriftgröße nicht definiert ist?

Die Schriftgröße ist immer definiert. Wenn Sie sie nicht explizit angegeben haben, wird sie über den gesamten Dokumenten-Baum vererbt. Wenn sie wirklich nirgendwo definiert ist, beträgt sie 16 Pixel. Darüber sind sich sogar einmal alle Browser einig.

Die neue „rem“ Einheit

Eine gute Gelegenheit auf die neue rem Einheit hinzuweisen, die es in CSS3 gibt. rem steht für root em und wird bereits von vielen Browsern unterstützt: IE9+, FF3.6+, Chrome, Safari 5+, und Opera 11.6+.

Während es mit em leicht passieren kann, das Layout zu zerstören wenn Breite oder Höhe eines Elements in em definiert sind (nämlich wenn sich die Schriftgröße ändert), ist das bei rem nicht der Fall. Weil rem sich eben nicht auf die aktuelle Schriftgröße bezieht, sondern auf die des Root Elements <hmtl> – wie auch bei em, beträgt sie 16 Pixel, falls sie nicht angegeben wurde.

html {
  font-size: 20px;
}
.element {
  width: 3rem;
  height: 1.5rem;
}

ergibt eine Höhe von 30 Pixel und eine Breite von  60 Pixel.