Einheiten & Werte

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 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.

Prozentwerte beziehen sich auf das Eltern-Element, aber je nach Eigenschaft auf eine andere Dimension:

• width: 50%: 50% der Breite des Eltern-Elements
• padding: 10%: 10% der Breite des Eltern-Elements (auch bei padding-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 beziehen sich auf die Größe des Browser-Fensters (den sichtbaren Bereich):

• vw: 1% der Viewport-Breite
• vh: 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:

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.

Es gibt noch mehr CSS-Einheiten, die in bestimmten Situationen nützlich sind:

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.

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 mit rgb(0 0 0 / 0))
• currentColor: Übernimmt den aktuellen color-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.

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.