Längeneinheiten verstehen in CSS

Problem

Sie wollen wissen, welche Längeneinheiten Sie in CSS verwenden können.

Lösung

Die CSS-Spezifikationen beschreiben eine Vielzahl von Möglichkeiten, Breiten, Höhen und Abstände zu definieren. Hierfür stehen drei Arten von Maßeinheiten zur Verfügung:

  •  absolute Werte (z.B. Zoll, Zentimeter, Punkt)
  •  relative Werte (z.B. em-Werte, px)
  •  Prozentwerte

Diskussion

Absolute Längeneinheiten

Prinzipiell unterscheidet man zwischen absoluten und relativen Längeneinheiten. Zu den absoluten Längeneinheiten gehören:

  •  Inches (in, Zoll)
  •  Zentimeter (cm)
  •  Millimeter (mm)
  •  Punkte (pt)
  •  Pica (pc)

Relative Längeneinheiten

Relative Längeneinheiten bestimmen die Länge einer Eigenschaft basierend auf dem Wert einer anderen Eigenschaft, die eine bestimmte Länge definiert. Hierzu gehören die folgenden Längeneinheiten:

  •  em-Einheiten (em)
  •  x-Höhe (ex)
  •  Pixel (px)

Pixel: relativ oder absolut?

Tatsächlich werden Pixel in der CSS-Spezifikation als "absolute" Maßeinheiten definiert, weil sie sich auf die physikalischen Bildpunkte des Ausgabemediums beziehen.

Das Problem dabei ist nur, dass die CSS-Maßeinheit px nicht unbedingt einem tatsächlichen Hardwarepixel entsprechen muss. Je nachdem, ob Sie sich eine Webseite auf einem alten 12-Zoll-Monitor oder auf einem iPhone mit Retina-Display ansehen, ist die Pixeldichte unterschiedlich hoch.

Aus diesem Grund bezeichnen wir die Maßeinheit px hier als relative Maßeinheit.

em-Einheiten gehören zu den beliebtesten Maßeinheiten in CSS. Sie haben allerdings eine Besonderheit: Sie beziehen sich immer auf die Schriftgröße des aktuellen Elements. Angenommen, Sie haben die folgende Regel:

h1 {
font-size: 1.5em;
width: 10em;
}

In diesem Fall wird die Überschrift nicht etwa 160 Pixel breit (10 multipliziert mit der Standardschriftgröße 16px) darstellt, sondern 240 Pixel breit. Der Grund liegt darin, dass Sie zuvor die Schriftgröße um das Eineinhalbfache erhöht haben.

Das gilt auch bei verschachtelten Elementen. Hat das Elternelement eine Schriftgröße von 0.8em und Sie definieren für ein Nachfahrenelement ebenfalls font-size: 0.8em, werden die Texte nicht etwa gleich groß darstellt. Tatsächlich ist das Kindelement im Verhältnis zur Standardschriftgröße nur noch 0.64em groß.

Ähnliche Probleme können bei der Verwendung von Prozentwerten auftreten.

Info

Alle aktuellen Browser verwenden eine Standardschriftgröße von 16 Pixeln bzw. 1em. Diese kann allerdings vom Benutzer in den Browsereinstellungen verändert werden.

rem-Einheiten in CSS3

Zusätzlich zu den hier genannten Maßeinheiten definiert das Values and Units-Modul der CSS3-Spezifikation eine Reihe weiterer möglicher Längeneinheiten, unter anderem die Einheit rem.

Angaben in rem verhalten sich im Prinzip wie em-Einheiten. Der Unterschied besteht darin, dass sich die Größe von rem-Einheiten immer von der Schriftgröße des Wurzelelements herleitet - daher auch der Name rem, abgeleitet von "root em".

Das bedeutet, sofern der Benutzer die Standardschriftgröße nicht verändert hat, entspricht 1rem immer 16 Pixeln. Angaben in rem haben also überall die gleiche Bedeutung. 3.5rem entsprechen immer 56 Pixeln - unabhängig davon, welche Größen für einzelne Elemente definiert wurden oder wo diese stehen.

Folgende Browser können mit rem-Einheiten umgehen: Internet Explorer 9+, Firefox 5+, Safari 5+, Chrome 13+, Opera 11.6+, iOS Safari 4+ und Android Browser 2.1+.

Andere relative Längeneinheiten

Die x-Höhe (ex) bezieht sich auf die Höhe des kleingeschriebenen Buchstabens x des verwendeten Zeichensatzes. Diese Einheit kommt jedoch nur sehr selten zum Einsatz. Deutlich häufiger verwendet man Pixel und Prozentwerte.

Info

Bei der Angabe einiger Maßeinheiten sind auch Nachkommastellen erlaubt, z.B. 0.1em. Beachten Sie hierbei, dass statt des Kommas der englische Dezimalpunkt (.) verwendet werden muss.

Prozentwerte

Prozentwerte (z.B. 120%) beziehen sich immer auf einen anderen Wert, z.B. eine Längenangabe. Welcher Wert dies im Einzelnen ist, hängt von der Eigenschaft ab, für die er definiert wurde.