Einheiten

In CSS beschreiben px, em, rem und % unterschiedliche Arten von Größenangaben. Sie bestimmen z. B. Schriftgrößen, Abstände, Breiten oder Höhen.

px - Pixel

px steht für Pixel und ist eine absolute Einheit

1font-size: 16px;
2width: 300px;

Eigenschaften

• feste Größe
• leicht vorhersebar
• unabhängig von Eltern-Elementen

Nachteile

• weniger flexibel für Responsive Design
• schlechter sklierbar für Barrierefreiheit

Typische Nutzung

• feine Linien
• Icons
• kleine präziese Abstände

em — relativ zur Schriftgröße des Elternteils

Die Einheit em ist eine sogenannte relative Einheit. Das bedeutet, dass sie keinen festen Wert (wie Pixel) hat, sondern sich immer an der Schriftgröße ihres direkten übergeordneten Eltern Elements orientiert. Grundsätzlich gilt die einfache Formel: 1em = Die Schriftgröße des übergeordneten Elements. 2em = Die doppelte Schriftgröße des übergeordneten Elements Wenn du also einen Wert in em angibst, wird dieser mit der Schriftgröße des Parent-Elements multipliziert.

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 2em;
7}

Das Element .parent hat eine feste Schriftgröße von 20px. Das Element .child bekommt 2em. Der Browser rechnet: 2 × 20px = 40px.

1body {
2  font-size: 16px;
3}
4
5.parent {
6  font-size: 1.5em; /* 24px */
7}
8
9.child {
10  font-size: 2em; /* 48px */
11}

Typische Nutzung

• Komponenten, die sich relativ mit skalieren sollen
• Padding/Margin abhängig von Textgröße

rem — relativ zur Root-Schriftgröße

Die Einheit rem (Root EM) in CSS ist ebenfalls eine relative Einheit, unterscheidet sich aber wesentlich von em. Während sich em auf die Schriftgröße seines direkten Elternelements bezieht, bezieht sich rem immer auf die Schriftgröße des Root-Elements (des html-Elements). Unbeschadet seiner Verschachtelungstiefe. Dies vermeidet den Kaskaden-Effekt von em.

Anders als bei em spielt die Schriftgröße des direkten Elternelements keine Rolle. Dadurch bleiben Größen vorhersehbarer und verschachtelte Elemente vergrößern sich nicht ständig weiter.

1html {
2  font-size: 16px;
3}
4
5h1 {
6  font-size: 2rem; /* 32px */
7}
8
9p {
10  font-size: 1rem; /* 16px */
11  padding: 1.5rem; /* 24px */
12}

• Das Root-Element html ist auf 16px gesetzt.
• Das Element h1 bekommt die Größe 2rem. Der Browser rechnet: 2 * 16px = 32px.
• Das Element p bekommt 1rem, also 1 * 16px = 16px.
• Das Padding von p bekommt 1.5rem, also 1,5 * 16px = 24px.

REM ignoriert Elternelemente (der Unterschied zu EM): Verschachtelung hat keine Auswirkungen.

1html {
2  font-size: 16px;
3}
4
5.parent {
6  font-size: 20px;
7}
8
9.child {
10  font-size: 2rem; /* 32px – immer bezogen auf html (16px × 2) */
11}

• Das Root-Element html ist auf 16px gesetzt.
• Das Elternelement .parent hat eine eigene Schriftgröße von 20px.
• Das Kind-Element .child bekommt die Größe 2rem.
• Der Browser rechnet immer noch: 2 * 16px = 32px.
• Der Text innerhalb von .child wird mit 32 Pixeln dargestellt. Die 20px des Elternelements werden ignoriert.

Vorteile von rem

• einheitliche Skalierung über die ganze Seite
• kein „Aufschaukeln“ bei verschachtelten Elementen wie bei em
• gut für Responsive Design und Barrierefreiheit

Typische Nutzung

• Schriftgrößen im gesamten Layout
• Abstände (Padding, Margin) und Komponentengrößen
• Design-Systeme mit konsistenten Abstufungen

Tipp für die Praxis: Eine gängige und sehr bewährte Methode in der modernen Webentwicklung ist es, rem für globale Schriftgrößen und Layout-Raster zu nutzen (da es vorhersehbar ist) und em gezielt für kleine UI-Komponenten (wie das Padding in einem Button), damit diese in sich stimmig bleiben, wenn du ihre Schriftgröße änderst.

1.box {
2  width: 100%;
3}

Prozentangaben in CSS haben den Vorteil, dass sie leicht verständlich sind, da das Rechnen mit Prozenten aus dem Alltag bekannt ist. Dadurch lassen sich Größenangaben oft intuitiv festlegen und anpassen. Ein Nachteil besteht jedoch darin, dass Prozentwerte denselben Nachteil wie die Einheit em besitzen: Bei verschachtelten Elementen kann ein Kaskaden-Effekt entstehen, der die tatsächlichen Größen schwer vorhersehbar und schwieriger zu kontrollieren macht.