CSS-Einheiten-Übersicht
Alle CSS-Längeneinheiten im Vergleich: px, rem, em, vw, vh, ch, cm, pt und mehr live in deinem Browser gemessen und umgerechnet.
Die CSS-Einheiten-Übersicht zeigt alle Längeneinheiten im direkten Vergleich: absolute wie px, cm und pt, schriftbezogene wie em, rem, ch und lh sowie Viewport-Einheiten wie vw, vh und dvh. Jeder Wert wird live in deinem Browser gemessen und in Pixel umgerechnet, auf Wunsch mit eigener Schriftgröße und Zeilenhöhe.
| Einheit | Art | In px | Vergleich |
|---|---|---|---|
1px CSS-Pixel, Grundeinheit am Bildschirm | absolut | – | |
1cm Zentimeter (1 cm = 37,8 px) | absolut | – | |
1mm Millimeter | absolut | – | |
1Q Viertelmillimeter | absolut | – | |
1in Zoll (1 in = 96 px) | absolut | – | |
1pt Punkt, Drucktypografie (1 pt = 1,33 px) | absolut | – | |
1pc Pica (1 pc = 12 pt) | absolut | – | |
1em Schriftgröße des Elements | Schrift | – | |
1rem Schriftgröße des Wurzelelements (html) | Schrift | – | |
1ex Höhe des kleinen x der Schrift | Schrift | – | |
1ch Breite der Ziffer 0 | Schrift | – | |
1cap Höhe der Großbuchstaben | Schrift | – | |
1ic Breite eines CJK-Zeichens (水) | Schrift | – | |
1lh Zeilenhöhe des Elements | Schrift | – | |
1rlh Zeilenhöhe des Wurzelelements | Schrift | – | |
1vw 1 % der Fensterbreite | Viewport | – | |
1vh 1 % der Fensterhöhe | Viewport | – | |
1vmin 1 % der kleineren Fensterseite | Viewport | – | |
1vmax 1 % der größeren Fensterseite | Viewport | – | |
1svh 1 % der kleinsten Höhe (Browserleisten sichtbar) | Viewport | – | |
1lvh 1 % der größten Höhe (Leisten eingefahren) | Viewport | – | |
1dvh 1 % der aktuellen Höhe (passt sich an) | Viewport | – |
„–“ bedeutet: Dein Browser kennt die Einheit nicht. rem und rlh beziehen sich auf diese Seite.
Absolute und relative Einheiten
Absolute Einheiten haben eine feste Größe in Pixeln. Relative Einheiten hängen von etwas anderem ab: von der Schrift oder vom Browserfenster. Für barrierefreie, flexible Layouts sind relative Einheiten meist die bessere Wahl, weil sie mitwachsen, wenn Nutzer die Schriftgröße erhöhen.
| Zweck | Empfohlene Einheit |
|---|---|
| Schriftgrößen | rem, fließend mit clamp() |
| Abstände in Komponenten | rem oder em |
| Textbreite | ch, z. B. max-width: 65ch |
| Vollbild-Bereiche | dvh oder svh |
| Rahmen, feine Linien | px |
| Druck | cm, mm, pt |
Konkrete Werte rechnest du im PX-REM-EM-Umrechner und im Viewport-Einheiten-Rechner um.
Häufige Fragen
Ist 1 cm am Bildschirm wirklich ein Zentimeter?
Nein. CSS legt 1 in auf genau 96 px fest, 1 cm sind daher immer 37,8 px. Wie groß das physisch ist, hängt von Bildschirm und Zoom ab. Absolute Einheiten sind vor allem für den Druck sinnvoll.
Wann nehme ich em und wann rem?
rem bezieht sich immer auf die Schriftgröße des html-Elements und ist damit überall gleich – ideal für Abstände und Schriftgrößen. em bezieht sich auf das aktuelle Element und eignet sich für Werte, die mit der Schrift einer Komponente mitwachsen sollen, etwa Innenabstände von Buttons.
Was ist der Unterschied zwischen vh, svh, lvh und dvh?
Auf Smartphones fahren Browserleisten beim Scrollen ein und aus. svh misst die kleinste, lvh die größte und dvh die aktuelle Höhe. vh entspricht meist lvh. Für Vollbild-Bereiche ist dvh oder svh die sicherere Wahl.
Warum sind ch und ex je nach Schrift unterschiedlich?
Sie messen echte Zeichen der verwendeten Schrift: ch die Breite der 0, ex die Höhe des kleinen x. Gemessen wird hier mit der Schrift dieser Seite.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.