Einheiten & Werte
Zuletzt aktualisiert am 10. Februar 2026
Du weißt jetzt, wie das Box-Modell funktioniert, und hast dabei schon Werte wie 20px oder 100% geschrieben. Aber warum gibt es so viele verschiedene Einheiten? Weil unterschiedliche Situationen unterschiedliche Maßstäbe brauchen. Ein fester Rahmen von 2 Pixeln ergibt Sinn, aber eine feste Seitenbreite von 1200 Pixeln ignoriert Smartphones komplett.
Absolute Einheiten: Pixel
Von den absoluten CSS-Einheiten (cm, mm, in, pt, pc, px) ist in der Praxis nur eine relevant: px (Pixel). Die anderen stammen aus der Druckwelt und haben im Webdesign so gut wie keine Bedeutung.
.box {
width: 200px;
height: 100px;
border: 2px solid #1a56db;
}<div class="box">200px × 100px</div>Ein CSS-Pixel ist nicht zwingend ein physischer Bildschirm-Pixel. Auf Retina-Displays entspricht 1 CSS-Pixel zum Beispiel 2 oder 3 physischen Pixeln. Aber das ist ein Detail, das CSS für dich abstrahiert. Pixel sind gut geeignet für feste Größen wie Border, Schatten oder Icons.
Relative Einheiten: em und rem
Relative Einheiten passen sich an ihren Kontext an. Die beiden wichtigsten sind em und rem.
em: relativ zum Eltern-Element
1em entspricht der font-size des Elements selbst. Wenn du em bei der font-size Eigenschaft verwendest, bezieht sich der Wert auf die font-size des Eltern-Elements.
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 1.5 × 20px = 30px */
padding: 0.5em; /* 0.5 × 30px = 15px */
}<div class="parent">Eltern: 20px
<div class="child">Kind: 1.5em = 30px (Padding: 0.5em = 15px)</div>
</div>Wichtig: Sobald die font-size auf 1.5em gesetzt ist, berechnen sich alle anderen em-Werte innerhalb des Elements anhand der neuen Schriftgröße (30px), nicht anhand der Eltern-Schriftgröße (20px).
Das Verschachtelungs-Problem
em hat einen Nachteil: Die Werte potenzieren sich bei Verschachtelung.
.nested {
font-size: 1.5em;
}
/* Ebene 1: 1.5 × 16px = 24px */
/* Ebene 2: 1.5 × 24px = 36px */
/* Ebene 3: 1.5 × 36px = 54px */<div class="nested">1.5em = 24px (Basis: 16px)
<div class="nested">1.5em = 36px (1.5 × 24px)
<div class="nested">1.5em = 54px (1.5 × 36px)</div>
</div>
</div>Jede Verschachtelungsebene multipliziert die Schriftgröße mit 1.5. Das wird schnell unkontrollierbar.
rem: relativ zum Root-Element
rem löst genau dieses Problem. 1rem bezieht sich immer auf die font-size des <html>-Elements, egal wie tief verschachtelt.
/* html hat standardmäßig font-size: 16px */
.level {
font-size: 1.5rem; /* Immer 24px */
}
/* Verschachtelung spielt keine Rolle */<div class="level">1.5rem = 24px
<div class="level">1.5rem = 24px
<div class="level">1.5rem = 24px (immer gleich!)</div>
</div>
</div>Egal ob erstes, zweites oder drittes Level: 1.5rem ist immer 1.5 × 16px = 24px. Deshalb ist rem die sicherere Wahl für Schriftgrößen und Abstände in den meisten Projekten.
Prozent
Prozentwerte beziehen sich auf das Eltern-Element, aber je nach Eigenschaft auf eine andere Dimension:
width: 50%: 50% der Breite des Eltern-Elementspadding: 10%: 10% der Breite des Eltern-Elements (auch beipadding-top!)font-size: 120%: 120% der Schriftgröße des Eltern-Elements
.container {
width: 300px;
}
.half {
width: 50%; /* 150px */
}
.full {
width: 100%; /* 300px */
}<div class="container">Container: 300px
<div class="half">50% = 150px</div>
<div class="full">100% = 300px</div>
</div>Prozent sind ideal für flexible Layouts, die sich an die Breite des Containers anpassen.
Viewport-Einheiten
Viewport-Einheiten beziehen sich auf die Größe des Browser-Fensters (den sichtbaren Bereich):
vw: 1% der Viewport-Breitevh: 1% der Viewport-Höhe
.full-width {
width: 100vw; /* Volle Viewport-Breite */
}
.half-height {
height: 30vh; /* 30% der Viewport-Höhe */
}<div style="overflow:hidden"><div class="full-width">100vw = volle Breite des Viewports</div></div>
<div class="half-height">30vh = 30% der Viewport-Höhe</div>Viewport-Einheiten sind nützlich für Hero-Sektionen, die den ganzen Bildschirm einnehmen sollen, oder für responsive Schriftgrößen.
Neue Viewport-Einheiten
Auf mobilen Geräten verändert sich die sichtbare Höhe, wenn die Adressleiste ein- oder ausgeblendet wird. CSS bietet dafür drei Varianten:
| Einheit | Bedeutung | Viewport-Höhe |
|---|---|---|
svh | Small Viewport Height | Kleinste mögliche Höhe (Adressleiste sichtbar) |
lvh | Large Viewport Height | Größte mögliche Höhe (Adressleiste ausgeblendet) |
dvh | Dynamic Viewport Height | Aktuelle Höhe (passt sich dynamisch an) |
Für die meisten Fälle ist dvh die beste Wahl, weil es sich an die tatsächlich sichtbare Fläche anpasst. Die Breitenäquivalente svw, lvw und dvw existieren ebenfalls, sind aber weniger relevant, weil sich die Breite auf Mobilgeräten selten ändert.
Weitere Einheiten im Überblick
Es gibt noch mehr CSS-Einheiten, die in bestimmten Situationen nützlich sind:
| Einheit | Bezug | Typischer Einsatz |
|---|---|---|
ch | Breite der Ziffer “0” | Textbreiten begrenzen (max-width: 65ch) |
ex | Höhe des Buchstabens “x” | Typografische Feinheiten |
lh | Zeilenhöhe (line-height) | Abstände relativ zur Zeilenhöhe |
Besonders ch ist in der Praxis beliebt. max-width: 65ch begrenzt eine Textzeile auf etwa 65 Zeichen, was die optimale Lesebreite für Fließtext ist.
Farbwerte
Farben sind in CSS allgegenwärtig. Du hast in den bisherigen Beispielen schon Hex-Werte wie #1a56db gesehen. CSS bietet mehrere Formate:
Hex-Notation
.farbe1 { color: #1a56db; } /* 6 Ziffern: RRGGBB */
.farbe2 { color: #f00; } /* 3 Ziffern: Kurzform */
.farbe3 { color: #1a56db80; } /* 8 Ziffern: mit Alpha */<div class="hex6">#1a56db (6 Ziffern)</div>
<div class="hex3">#f00 (Kurzform von #ff0000)</div>
<div class="hex8">#1a56db80 (mit 50% Transparenz)</div>Hex-Werte sind das häufigste Format im Web. Die 3-Ziffern-Kurzform funktioniert, wenn jeweils beide Ziffern eines Kanals identisch sind: #ff0000 wird zu #f00.
rgb() und hsl()
/* RGB: Rot, Grün, Blau (0 bis 255) */
.box1 { background: rgb(26 86 219); }
/* RGB mit Alpha-Transparenz */
.box2 { background: rgb(26 86 219 / 0.3); }
/* HSL: Farbton (0 bis 360), Sättigung, Helligkeit */
.box3 { background: hsl(150 80% 40%); }<div class="rgb-box">rgb(26 86 219)</div>
<div class="rgb-alpha">rgb(26 86 219 / 0.3) mit Transparenz</div>
<div class="hsl-box">hsl(150 80% 40%)</div>rgb() definiert Farben über Rot-, Grün- und Blau-Anteile (jeweils 0 bis 255). hsl() verwendet Farbton (Hue, 0 bis 360 Grad), Sättigung (Saturation) und Helligkeit (Lightness). hsl() ist intuitiver, wenn du Farbvarianten erzeugen willst: Du änderst nur die Helligkeit und behältst den Farbton bei.
Schlüsselwörter und spezielle Werte
CSS kennt über 140 benannte Farben wie red, blue, tomato oder cornflowerblue. Dazu kommen zwei besondere Werte:
transparent: Vollständig durchsichtig (gleichbedeutend mitrgb(0 0 0 / 0))currentColor: Übernimmt den aktuellencolor-Wert des Elements
.element {
color: #dc2626;
border: 3px solid currentColor;
/* Border ist automatisch auch rot */
}<div class="current-color">Border-Farbe folgt automatisch der Textfarbe (currentColor).</div>currentColor ist nützlich, wenn Border, Schatten oder Icons automatisch die Textfarbe annehmen sollen. Änderst du die color, passt sich alles an.
Welche Einheit wann?
| Einsatzzweck | Empfohlene Einheit | Warum |
|---|---|---|
| Schriftgrößen | rem | Konsistent, keine Verschachtelungsprobleme |
| Abstände (Padding, Margin) | rem oder px | rem für konsistente Skalierung, px für kleine feste Werte |
| Breiten | %, vw | Flexibel, passt sich dem Container/Viewport an |
| Max-Breite für Text | ch | Optimale Lesebreite (max-width: 65ch) |
| Border, Schatten | px | Feste, kleine Werte |
| Höhe (Hero-Sektionen) | vh, dvh | Bezug zum Viewport |
| Farben | Hex oder hsl() | Hex ist Standard, hsl() für Farbsysteme |
Häufige Fehler
emfür Schriftgrößen in verschachtelten Elementen: Die Werte multiplizieren sich mit jeder Ebene. Verwenderemstattemfür Schriftgrößen.100vhauf Mobilgeräten: Die Adressleiste wird nicht einberechnet, dadurch ragt der Inhalt über den sichtbaren Bereich hinaus. Verwende100dvhstatt100vh.- Einheit bei 0 angeben:
margin: 0pxfunktioniert, abermargin: 0reicht aus. Null ist in jeder Einheit gleich. Die Einheit wegzulassen ist sauberer. - Prozent-Padding missverstehen:
padding-top: 10%bezieht sich auf die Breite des Eltern-Elements, nicht auf die Höhe. Das ist kein Fehler, sondern CSS-Spezifikation, aber es überrascht Anfänger. - Nur Pixel verwenden: Ein Layout komplett in Pixeln ist nicht flexibel. Kombiniere verschiedene Einheiten je nach Kontext.
Zusammenfassung
| Einheit | Bezug | Typischer Einsatz |
|---|---|---|
px | Absolut | Border, Schatten, kleine feste Werte |
em | Eigene/Eltern-Schriftgröße | Komponenten-internes Spacing |
rem | Root-Schriftgröße (16px) | Schriftgrößen, Abstände |
% | Eltern-Element | Flexible Breiten |
vw / vh | Viewport-Breite/-Höhe | Fullscreen-Layouts, responsive Typo |
dvh | Dynamische Viewport-Höhe | Mobile-optimierte Höhen |
ch | Breite der “0” | Lesebreite begrenzen |
Hex (#rrggbb) | Farbkanäle | Häufigstes Farbformat |
rgb() / hsl() | Farbkanäle mit Transparenz | Farbsysteme, Alpha-Werte |
currentColor | Aktuelle color | Dynamische Border/Schatten-Farben |
Du kennst jetzt die wichtigsten CSS-Einheiten und weißt, wann du welche einsetzen solltest. Im nächsten Artikel geht es um CSS Custom Properties: Variablen, die dein CSS wartbarer und flexibler machen.
Bleib auf dem Laufenden
Erhalte neue Inhalte direkt in dein Postfach
Was erwartet dich?
Neue Artikel & Videos
Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.
Plattform & Kurs-Updates
Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.
Einmal die Woche in deinem Postfach
Kurz, auf den Punkt, kein Spam.