Ausführbare CSS-Docs: CSS Einheiten

Q: Was ist der Unterschied zwischen rem und em?

rem bezieht sich auf die Schriftgröße des Wurzelelements ( ), also ist 1.5rem überall auf der Seite gleich groß. em bezieht sich auf die Schriftgröße des Elements selbst (bei font-size auf die des Elternelements) und multipliziert sich deshalb, wenn Elemente verschachtelt sind.

Q: Soll ich für die Schriftgröße rem oder px nehmen?

Nimm rem für Schriftgrößen. Es respektiert die Standardschriftgröße, die der Leser im Browser eingestellt hat, was px ignoriert. Der Browserzoom skaliert beides, aber nicht jeder Leser nutzt den Zoom.

Q: Wann nehme ich em statt rem?

Nimm em für Abstände, die mit dem eigenen Text des Elements skalieren sollen, etwa das Padding eines Buttons oder die Größe eines Icons neben Text. Dieselbe Klasse sieht dann bei jeder Schriftgröße richtig aus. Nimm rem für Schriftgrößen und Abstände auf Seitenebene, damit sich nichts multipliziert.

Q: Was ist der Unterschied zwischen 100vh und 100dvh?

100vh ist in mobilen Browsern die Höhe bei ausgeblendeter Adressleiste, also ist ein 100vh-Abschnitt höher als der sichtbare Bildschirm, solange die Leiste zu sehen ist. 100dvh (dynamische Viewport-Höhe) folgt der Leiste, wenn sie erscheint und verschwindet, und 100svh ist immer die kleinere Höhe.

rem vs. em in einer verschachtelten Demo

rem bezieht sich auf die Schriftgröße der Wurzel (das Element <html>, standardmäßig 16px). em bezieht sich auf die aktuelle Schriftgröße, was bei font-size die des Elternelements bedeutet. Verschachtle dieselbe Klasse dreimal, und der Unterschied wird sichtbar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rem vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .em  { font-size: 1.25em;  border-inline-start: 4px solid #f59e0b; padding-inline-start: 8px; }
    .rem { font-size: 1.25rem; border-inline-start: 4px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">em <div class="em">em <div class="em">em</div></div></div>
  <div class="rem">rem <div class="rem">rem <div class="rem">rem</div></div></div>
  <p id="out"></p>
  <script>
    const sizes = (cls) => [...document.querySelectorAll('.' + cls)].map((el) => getComputedStyle(el).fontSize).join(', ');
    document.getElementById('out').textContent = 'em: ' + sizes('em') + '  |  rem: ' + sizes('rem');
  </script>
</body>
</html>

Die ausgegebenen Größen hat der Browser berechnet. Jedes 1.25em multipliziert sein Elternelement: 20px, dann 25px, dann 31,25px. Jedes 1.25rem schaut nur auf die Wurzel: 20px, 20px, 20px. Wegen dieses Multiplizierens geraten em-Schriftgrößen in verschachtelten Listen und Menüs außer Kontrolle, und deshalb setzen die meisten Websites Schriftgrößen in rem.

Worauf sich jede Einheit bezieht

Einheit	Bezieht sich auf	1 Einheit standardmäßig
`px`	nichts (ein CSS-Pixel)	1px
`rem`	Schriftgröße des Wurzelelements (`html`)	16px
`em`	Schriftgröße des Elements; bei `font-size` selbst die des Elternelements	16px auf oberster Ebene
`%`	hängt von der Eigenschaft ab (siehe unten)
`vw` / `vh`	1% der Breite / Höhe des Viewports
`dvh`, `svh`, `lvh`	1% der dynamischen, kleinen oder großen Viewport-Höhe
`vmin` / `vmax`	1% der kleineren / größeren Viewport-Seite
`ch`	die Breite der „0“ in der aktuellen Schrift	etwa ein halbes em
`ex`	die x-Höhe der aktuellen Schrift	etwa ein halbes em

Ein CSS-Pixel ist kein Gerätepixel: Auf einem Handy mit 3x-Bildschirm ist 1px drei Gerätepixel breit. Es bleibt auf verschiedenen Bildschirmen ungefähr gleich groß, deshalb ist px für Rahmen und Schatten weiterhin in Ordnung.

em für Abstände, die mit dem Text skalieren

em ist nicht nur für Schriftgrößen da. Bei padding, margin, width oder border-radius bedeutet es „mal die Schriftgröße dieses Elements“. Damit funktioniert eine einzige Button-Klasse in jeder Größe:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 0.5em 1em;   /* scales with this button's own font size */
      border-radius: 0.4em;
      border: 0;
      background: #2563eb;
      color: white;
      margin: 4px;
    }
    .small { font-size: 0.75rem; }
    .large { font-size: 1.5rem; }
  </style>
</head>
<body>
  <button class="btn small">Small</button>
  <button class="btn">Normal</button>
  <button class="btn large">Large</button>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.btn')]
      .map((b) => b.textContent + ': font ' + getComputedStyle(b).fontSize + ', padding ' + getComputedStyle(b).paddingTop + ' ' + getComputedStyle(b).paddingLeft)
      .join('  |  ');
  </script>
</body>
</html>

Das Padding jedes Buttons ist vertikal die halbe Schriftgröße und horizontal eine Schriftgröße, also sehen die drei aus wie derselbe Button in drei Größen. Mit Padding in px bräuchtest du für jede Größe eine eigene Padding-Regel.

Beachte, dass Buttons die Schriftgröße der Seite standardmäßig nicht erben (Browser geben Formularelementen eine eigene), also ist der mittlere Button hier in Chrome 13,33px groß, nicht 16px. Füge Buttons und Eingabefeldern font: inherit hinzu, wenn sie zur Seite passen sollen.

Prozent: hängt von der Eigenschaft ab

% hat keine einheitliche Bedeutung. Jede Eigenschaft legt fest, wovon es ein Prozentsatz ist:

Eigenschaft	`%` bezieht sich auf
`width`, `max-width`, `left`, `right`	die Breite des Elternelements (des umgebenden Blocks)
`height`, `top`, `bottom`	die Höhe des Elternelements, und nur wenn es eine festgelegte Höhe hat
`padding`, `margin` (alle vier Seiten)	die Breite des Elternelements
`font-size`	die Schriftgröße des Elternelements (`150%` = `1.5em`)
`line-height`	die eigene Schriftgröße des Elements
`transform: translate()`	die eigene Größe des Elements

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent { width: 400px; background: #e5e7eb; padding: 8px 0; }
    .child { width: 50%; height: 50%; padding-top: 5%; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c">child</div></div>
  <p id="out"></p>
  <script>
    const s = getComputedStyle(document.getElementById('c'));
    const r = document.getElementById('c').getBoundingClientRect();
    document.getElementById('out').textContent =
      'width ' + s.width + ', padding-top ' + s.paddingTop + ', rendered height ' + Math.round(r.height) + 'px';
  </script>
</body>
</html>

width: 50% sind 200px, die Hälfte des Elternelements. padding-top: 5% sind 20px: 5% der Breite des Elternelements, nicht seiner Höhe. Und height: 50% bewirkt nichts, weil das Elternelement keine festgelegte Höhe hat, also ist das Kind nur so hoch wie sein Text plus dieses Padding. Die Seite zu Breite und Höhe behandelt diese Regel im Detail.

vw, vh und die mobile Adressleiste

1vw ist 1% der Viewport-Breite und 1vh 1% seiner Höhe. Sie sind praktisch für bildschirmfüllende Abschnitte und für fließende Größen (oft innerhalb von clamp()). Auf Handys hat vh einen Haken: Die Adressleiste des Browsers gleitet beim Scrollen ein und aus, und 100vh ist die Höhe ohne die Leiste, also wird ein Hero mit height: 100vh unten abgeschnitten, solange die Leiste zu sehen ist. Die neueren Einheiten beheben das:

Einheit	Verwendete Höhe
`100vh`	der große Viewport (Leisten ausgeblendet) in den meisten mobilen Browsern
`100svh`	der kleine Viewport (Leisten sichtbar): passt immer
`100lvh`	ausdrücklich der große Viewport
`100dvh`	der dynamische Viewport: ändert sich, wenn sich die Leisten bewegen

.hero {
  min-height: 100vh;  /* fallback for older browsers */
  min-height: 100svh; /* fits the screen even with the address bar visible */
}

vw hat seinen eigenen Haken: 100vw enthält die Breite einer vertikalen Scrollleiste, wenn diese Platz einnimmt (wie unter Windows), also kann width: 100vw breiter als die Seite sein und eine horizontale Scrollleiste erzeugen. Nimm width: 100% für „die volle Breite des Elternelements“.

ch für gut lesbare Zeilenlänge

ch ist die Breite des Zeichens „0“, also begrenzt max-width: 65ch einen Absatz auf ungefähr 65 Zeichen pro Zeile, eine angenehme Leselänge, bei jeder Schriftgröße:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ch</title>
  <style>
    body { font-family: Georgia, serif; }
    p { max-width: 40ch; background: #f3f4f6; padding: 8px; }
    .big { font-size: 1.4rem; }
  </style>
</head>
<body>
  <p>This paragraph is limited to 40ch, about forty characters per line, however wide the page is.</p>
  <p class="big">At a bigger font size the box widens with the text, so each line still holds about forty characters.</p>
</body>
</html>

Welche Einheit du nimmst

Für	Nimm	Warum
Schriftgrößen	`rem`	Überall gleich, respektiert die Schriftgrößeneinstellung des Lesers
Padding und Lücken in Komponenten	`rem` oder `em`	`em`, wenn es mit dem eigenen Text der Komponente wachsen soll
Rahmen, feine Linien, Schatten	`px`	Sollen bei jeder Schriftgröße dünn bleiben
Layoutbreiten	`%`, `fr`, `max-width` in `rem` oder `ch`	Folgen dem Container, begrenzen die Zeilenlänge
Bildschirmfüllende Abschnitte	`svh` / `dvh` (mit `vh` als Fallback)	Kommen mit mobilen Adressleisten klar
Fließende Schrift	`clamp()` mit `rem` und `vw` gemischt	Wächst mit dem Bildschirm innerhalb von Grenzen

Warum rem Leser respektiert und px nicht

Browser haben eine Einstellung für die Standardschriftgröße, die Menschen nutzen, die größeren Text brauchen. Sie ändert die Schriftgröße der Wurzel, also wächst alles in rem und em mit. Ein font-size: 14px bleibt 14px, egal was der Leser gewählt hat. Der Browserzoom skaliert auch px, aber auf die Schriftgrößeneinstellung verlassen sich viele Leser. Das ist der Hauptgrund, Schriftgrößen in rem zu setzen.

Manche Websites setzen html { font-size: 62.5%; }, damit 1rem 10px entspricht und das Rechnen leichter fällt. Das respektiert die Einstellung des Lesers weiterhin (62,5% von dem, was er gewählt hat), aber denk daran, an body eine lesbare font-size zu setzen, sonst zeigt jedes Element ohne eigene Größe Text in 10px.

Häufige Fehler

em-Schriftgrößen in verschachtelten Elementen. Sie multiplizieren sich auf jeder Ebene. Nimm rem für Schriftgrößen.
height: 50%, das nichts bewirkt. Das Elternelement braucht eine festgelegte Höhe, damit eine Prozenthöhe funktioniert.
Erwarten, dass padding-top: 10% der Höhe des Elternelements folgt. Vertikales Padding und Margin in Prozent nutzen die Breite des Elternelements.
width: 100vw erzeugt eine horizontale Scrollleiste. Es schließt die Scrollleiste ein. Nimm 100%.
height: 100vh wird auf Handys abgeschnitten. Nimm 100svh oder 100dvh.
html { font-size: 12px } setzen. Ein px-Wert an der Wurzel überschreibt die Schriftgrößeneinstellung des Lesers für die ganze Seite. Lass die Wurzel in Ruhe oder nimm einen Prozentwert.

Häufig gestellte Fragen

Was ist der Unterschied zwischen rem und em?

rem bezieht sich auf die Schriftgröße des Wurzelelements (<html>), also ist 1.5rem überall auf der Seite gleich groß. em bezieht sich auf die Schriftgröße des Elements selbst (bei font-size auf die des Elternelements) und multipliziert sich deshalb, wenn Elemente verschachtelt sind.

Wie viele Pixel sind 1rem?

Standardmäßig 16px, weil Browser die Schriftgröße der Wurzel auf 16px setzen. Erhöht der Nutzer die Standardschriftgröße in den Browsereinstellungen oder setzt du html { font-size: ... }, ändert sich 1rem mit.

Soll ich für die Schriftgröße rem oder px nehmen?

Nimm rem für Schriftgrößen. Es respektiert die Standardschriftgröße, die der Leser im Browser eingestellt hat, was px ignoriert. Der Browserzoom skaliert beides, aber nicht jeder Leser nutzt den Zoom.

Wann nehme ich em statt rem?

Nimm em für Abstände, die mit dem eigenen Text des Elements skalieren sollen, etwa das Padding eines Buttons oder die Größe eines Icons neben Text. Dieselbe Klasse sieht dann bei jeder Schriftgröße richtig aus. Nimm rem für Schriftgrößen und Abstände auf Seitenebene, damit sich nichts multipliziert.

Was ist der Unterschied zwischen 100vh und 100dvh?

100vh ist in mobilen Browsern die Höhe bei ausgeblendeter Adressleiste, also ist ein 100vh-Abschnitt höher als der sichtbare Bildschirm, solange die Leiste zu sehen ist. 100dvh (dynamische Viewport-Höhe) folgt der Leiste, wenn sie erscheint und verschwindet, und 100svh ist immer die kleinere Höhe.

Verwandte Konzepte