Zum Hauptinhalt springen
HAWK GT1191

Längenmaße: Absolute und relative Einheiten in CSS

Die Größe von Elementen kann in absoluten oder relativen Einheiten angegeben werden. Hier erfährst du, welche Einheiten es gibt und wann du welche verwenden solltest.
4 Min. (822 Wörter)
Zwei Stundeniernde blicken fragend in Richtung Kamera.
Wie viele Äpfel kaufst du auf dem Markt? 12 oder 50 Prozent aus der Box?

Unterschiede

Jede CSS-Deklaration enthält ein Paar aus Eigenschaft und Wert. Bei Längen- oder Größenangaben von HTML-Elementen werden numerische Werte verwendet, entweder als ganze Zahl oder als Dezimalzahl:

.box {
  width: 512px;
  font-size: 1.5em;
}
100px ist ein absoluter, 1.5em ist ein relativer Wert.

Wenn du dem Verkäufer auf dem Jahrmarkt bittest, dir 12 Äpfel zu verkaufen, dann ist das ein absoluter Wert. Wenn du dir hingegen die Hälfte der Äpfel aus der Kiste nimmst, dann ist das ein relativer Wert, abhängig von der Gesamtanzahl.

Auch in CSS gibt es absolute und relative Werte. Ein Beispiel: Der Bildschirm des Apple-Tablets iPad hat Pixelmaße von 1024x768. Möchtest du jetzt zwei Boxen nebeneinander darstellen und verwendest dabei fixe Werte wie width: 512px, dann wird dir das auf dem Smartphone um die Ohren fliegen. Zum einen sind die Dimensionen des Smartphones kleiner, zum anderen wird die Box auf dem iPad nicht nebeneinander dargestellt, weil der Platz nicht ausreicht.

Wenn du hingegen relative Einheiten wie Prozente (z.B. width: 50%) verwendest, dann passt sich die Box immer an die Größe des Elternelements1 an. Und das wiederum passt sich an die Größe des eigenen Elternelements an. Das geht so lang weiter bis zum obersten Element, dem Root-Elements2 html. Das ist im Übrigen 100 % des Viewport3 breit, also der Breite des Bildschirms. Das folende responsive Beispiel illustriert das:

# Demo

<body>
100 % des Viewports

<div class="container">
100 % vom Body

50 % vom Container

50 % vom Container

Wie lang bin ich?
Was glaubst du? Wie lang ist die kleinste Box und woran orentiert sie sich?

Relative Einheiten

Die relativen Einheiten unterteilen sich in verschiedene Kategorien, abhängig von dem, woran du dich orientieren möchtest. Die gebräuchlichste Kategorie ist die der relativen Schriftlängen. Hierbei beziehen sich die Einheiten auf die Schriftgröße des Elternelements.

Relative Schriftlängen

Neben der Angabe in Prozent, die du bereits schon kenngelernt hast, gibt es auch noch folgende Einheiten:

EinheitRelativ zu
emSchriftgröße des Elternelements
capHöhe der Großbuchstaben
chBreite des Zeichens 0
exHöhe des Buchstabens x
lhZeilenhöhe eines Elements

em ist dabei die gebräuchliste Einheit. Sie bezieht sich auf die Schriftgröße des Elternelements. 1em entspricht 100 %, 150 % wären dann 1.5em. Schauen wir uns exemplarisch das folgende Beispiel an.

In der Box soll der Fließtext 18 Pixel groß sein, also etwas größer als der Fließtext der anderen Elemente auf der Website. Die Überschrift soll 150 % der Schriftgröße unserer Box betragen.

<section class="announcement">
  <h2>Bekanntmachung</h2>

  Wir treffen uns Freitags in Haus E, Raum 08 (HIWEE08).
</section>
.announcement { font-size: 18px; }
.announcement h2 { font-size: 1.5em; }
Die Schriftgrößer der Überschrift wird relativ zum Elternelement, also der Announcement-Box gesetzt.

Die Überschrift entspräche umgerechnet 27px. Die Formel dazu lautet: 18px * 1,5 = 27px.

Relativ zum Root-Element

Wenn du die 18 Pixel der Announcement-Box vom Beispiel oben ebenfalls relativ angeben möchtest, und das solltest du, dann kannst du das auch mit em tun. Der Haken an der Sache: Wenn du in die Announcement-Box eine weitere Announcement-Box einfügst, dann orientiert sich die zweite an der ersten Box. Desto mehr Boxen du ineinander verschachtelst, desto größer wird jeweils die Schrift. Während 1.5em in der ersten Box 27 Pixel entsprechen, entsprechen 1.5em in der zweiten Box 40.5 Pixel.

Klingt kompliziert und ist es auch. Besser wäre es, die Einheit rem zu verwenden. Das r in rem steht für root und bezieht sich dabei auf das Root-Element. Der Browser gibt vor, dass die Standardgröße für Fließtext 16 Pixel groß ist, kann aber auch vom User in den Einstellungen verändert werden.

Noch einmal zusammengefasst:

em
Die relative Einheit em bezieht sich auf die Schriftgröße des Elternelements. 1em entsprechen 100 %, 150 % wären dann 1.5em.
rem
Die relative Einheit rem bezieht sich auf die Schriftgröße des html- oder body-Elements, das sind in der Regel 16px. Das r in rem steht für root.

Der angepasste Code sieht dann so aus:

.announcement { font-size: 1.125rem; }
.announcement h2 { font-size: 1.688rem; }
Der Fließtext ist 18 Pixel, die Überschrift 27 Pixel groß.

Hier einmal eine Gegenüberstellung unserer Announcement-Box, bei der wir (umgerechneet) 18 statt 16 Pixel verwenden:

Faktorem entsprechenrem entsprechen
0.59px8px
118px16px
1.2522.5px20px
236px32px
3.7567.5px60px

Übrigens gibt auch von cap, ch, ex und lh eine Variante, die sich auf das Root-Element bezieht. Diese haben dann ein r vorangestellt, also rch statt ch.

Unter Assets habe ich dir ein paar Links zu Tools interlegt, mit denen du die Größen berechnen kannst.

Relativ zum Viewport

Der Vollständigkeit halber möchte ich noch die Einheiten erwähnen, die sich auf den Viewport und auf den Container beziehen. Das ist für dich am Anfang noch nicht sonderlich relevant, du wirst aber früher oder später in komplexeren Layouts darüber stolpern.

EinheitRelativ zu
vh1 % der Höhe des Viewports
dvh1 % der dynamischen4 Höhe des Viewports
vw1 % der Breite des Viewports
dvw1 % der dynamischen4 Breite des Viewports
vmin1 % des kleineren Wertes des Viewports (Breite oder Höhe)
vmax1 % des größeren Wertes des Viewports (Breite oder Höhe)

Relativ zum Container

Längen, die sich auf einen Query-Container5 beziehen, sind:

EinheitRelativ zu
cqb1 % der Block-Größe des Query-Containers
cqh1 % der Höhe des Query-Containers
cqi1 % der Inline-Größe des Query-Containers
cqw1 % der Breite des Query-Containers
cqmin1 % des kleineren Wertes des Query-Containers (Breite oder Höhe)
cqmax1 % des größeren Wertes des Query-Containers (Breite oder Höhe)

Aufgabe

Um die relative Einheiten besser zu verstehen, probiere doch einmal, die Announcement-Box mit den oberen CSS nachzubauen. Verwende erst px und em und teste das Ergebnis im Browser durch Verkleinern und Vergrößern des Fensters. Anschließend ersetze die Einheiten durch rem und beobachte den Unterschied.

Fußnoten

  1. Das Elternelement ist das übergeordnete Element, in dem ein anderes Element eingebettet ist. Es kann auch als Container bezeichnet werden.

  2. Das Root-Element ist das oberste Element in der Hierarchie des DOM-Baums, also das <html>-Element.

  3. Der Viewport ist der sichtbare Bereich einer Website im Browserfenster. Er kann sich je nach Gerät und Bildschirmauflösung unterscheiden.

  4. Die dynamische Höhe und Breite des Viewports beziehen sich stets auf die aktuelle Größe des Viewports, also die Größe, die der Viewport gerade hat. Diese verändert sich zum Beispiel durch Scrollbalken oder die Adressleiste des Browsers. 2

  5. Container-Queries erlauben es, die Größe von Elementen an die Größe ihres Containers anzupassen und nicht an die des Viewports.

  • Verwendete Tags:
  • css