<length>

Übersicht

Der Platzhalter <length> steht für eine Längenangabe. Diese besteht immer aus aus einer Zahl (<number>) und einer Maßeinheit (px, em, pc, in, mm, …); zwischen diesen Elementen darf sich kein Leerzeichen befinden.

Der Wertebereich ist abhängig von der jeweiligen CSS-Eigenschaft, teils sind nur positive Werte sinnvoll und zulässig.
Oftmals wird auch eine prozentuale Angabe (<percentage>) akzeptiert, diese gehört jedoch strenggenommen nicht zu den <length>-Werten und wird deshalb an anderer Stelle besprochen.

<length> wird von vielen Eigenschaften benutzt, zum Beispiel width, margin, padding, font-size, border-width und text-shadow.

Interpolation

<length>-Werte können für Animationen interpoliert werden. Für die Berechnung werden sie als reelle Fließkommazahlen behandelt, dabei wird immer der berechnete Wert interpoliert. Die Geschwindigkeit bzw. die Zwischenschritte hängen von der der Animation zugeordneten Zeitfunktion ab.

Einheiten

Relative Längenmaße

Relativ zur Schriftgröße

Die nachfolgenden Einheiten beziehen sich immer auf eine Eigenschaft der Schriftart des Elements, für das sie genutzt werden (Ausnahme: rem und rlh, diese beziehen sich auf das Wurzelelement, meist das <html>-Element).

em: 1em entspricht der aus font-size berechneten Schriftgröße. Wird em zusammen mit font-size selbst benutzt, entspricht 1em der Schriftgröße des Elternelements.
em ist, zusammen mit Prozentwerten, das gebräuchlichste Maß, um den Fluß der Seitenelemente unabhängig von der vom Benutzer gewählten Schriftgröße einheitlich zu gewährleisten.
width:15em;
rem: Wie em, bezieht sich jedoch immer auf die berechnete Schriftgröße des Wurzelelements.
width:15rem;
ex: 1ex enspricht üblicherweise der Höhe des kleinen x; oftmals ist 1ex ≈ 0,5em.
width:15ex;
ch: 1ch enspricht der Breite der Ziffer '0' (Null, Unicode U+0030)
width:15ch;
cap: Nominale Höhe der Großbuchstaben.
lh: Die aus line-height berechnete Zeilenhöhe.
rlh: Wie lh, bezieht sich jedoch immer auf die berechnete Zeilenhöhe des Wurzelelements.

Relativ zum Viewport

Diese Werte werden vom sichtbaren Teil des Dokuments abgeleitet, dem Anzeigebereich. Sie sind also abhängig von der Fenster- bzw. Bildschirmgröße.

Innerhalb einer @page-Regel sind Viewport-Werte nicht zulässig.

vh: 1vh entspricht 1% der Anzeigenhöhe.
vw: 1vw entspricht 1% Anzeigenbreite.
vmin: Der kleinere der Werte vh und vw.
vmax: Der größere der Werte vh und vw.

Absolute Längenmaße

Absolute Längenmaße stehen für ein physikalisches Maß, sofern die physischen Eigenheiten des Ausgabemediums bekannt sind. Eine der Einheiten wird als Referenz festgelegt, alle anderen werden relativ zu ihr definiert. Die Festlegung hängt vom Ausgabegerät ab, genauer: von dessen Auflösung.

Bei Geräten mit niedriger Auflösung (namentlich herkömmliche Flachbildschirme) ist die Bezugsgröße das sogenannte Referenzpixel. Die Größe des Referenzpixels ist definiert als die wahrgenommene Größe eines Pixels auf einem Bildschirm mit der Auflösung 96dpi in etwa einer Armlänge Abstand. In der Praxis wird jedoch meist das tatsächliche Bildschirmpixel des gerade angeschlossenen Bildschirms als Referenzpixel definiert.
Ein Referenzpixel entspricht 1px, alle anderen Einheiten sind bei niedrig auflösenden Geräten von px abgeleitet. 1in ist in Abhängigkeit von px als 96px festgelegt, was wiederum 72pt entspricht.

Aufgrund dieser eher ungenauen Definition können in mm, cm oder in angegebene Längen von jenen abweichen, die tatsächlich als solche gemessen werden würden – in anderen Worten: 1cm auf dem Bildschirm ist üblicherweise nur ungefähr gleich einem Zentimeter auf dem Zollstock.

Bei Geräten mit hoher Auflösung hingegen entsprechen die Einheiten mm, cm und in ihren tatsächlichen Maßen, mithin den Einheiten Millimeter, Zentimeter und Zoll. Von ihnen abhängig ist die Einheit px, sie ist definiert als 1/96 eines Zolls.

px: Pixel, abhängig vom Anzeigegerät. Auf normalen Bildschirmen entspricht 1px einem physischen Pixel. Bei hochauflösenden Geräten wird die Anzahl physischer Pixel so bemessen, dass 1 Zoll ungefähr 96px entspricht, also für px eine theoretische Auflösung von 96dpi beibehalten wird.
width:150px;
cm: Zentimeter
width:10cm;
mm: Millimeter
width:10mm;
in: Zoll (Englisch: Inch). 1 Zoll = 2,54cm
width:10in;
pc: Picas. 1pc = 12pt = 1/6in
width:10pc;
pt: Punkt, ein Wert aus dem Druckgewerbe. 1pt = 1/72in
width:10pt;
mozmm: Experimentelle Maßeinheit, die unter Berücksichtigung der Auflösung des Anzeigegeräts immer exakten Millimetern entspricht.

Spezifikationen

Spezifikation	Status	Anmerkung
CSS Values and Units Module Level 3 Die Definition von '<length>' in dieser Spezifikation.	Anwärter Empfehlung	`ch`, `rem`, `vw`, `vh`, `vmin`, `vmax` hinzugefügt
CSS Level 2 (Revision 1) Die Definition von '<length>' in dieser Spezifikation.	Empfehlung	`pt`, `pc`, `px` definiert
CSS Level 1 Die Definition von '<length>' in dieser Spezifikation.	Empfehlung

Browserkompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Edge Mobile	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
Grundlegende Unterstützung	Chrome Vollständige Unterstützung 1	Edge Vollständige Unterstützung Ja	Firefox Vollständige Unterstützung 1	IE Vollständige Unterstützung 3	Opera Vollständige Unterstützung 3.5	Safari Vollständige Unterstützung 1	WebView Android Vollständige Unterstützung Ja	Chrome Android Vollständige Unterstützung Ja	Edge Mobile Vollständige Unterstützung Ja	Firefox Android Vollständige Unterstützung 4	Opera Android Vollständige Unterstützung Ja	Safari iOS Vollständige Unterstützung Ja	Samsung Internet Android Vollständige Unterstützung Ja
`cap` unit Experimentell	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Keine Unterstützung Nein	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Edge Mobile Keine Unterstützung Nein	Firefox Android Keine Unterstützung Nein	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein
`ch` unit	Chrome Vollständige Unterstützung 27	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 1 Hinweise Vollständige Unterstützung 1 Hinweise Hinweise From Firefox 1 to Firefox 3, `ch` was the width of the M character. Hinweise From Firefox 1 to Firefox 3, `ch` did not work with `border-width` and `outline-width` CSS properties.	IE Vollständige Unterstützung 9	Opera Vollständige Unterstützung 20	Safari Vollständige Unterstützung 7	WebView Android Vollständige Unterstützung Ja	Chrome Android Vollständige Unterstützung Ja	Edge Mobile Vollständige Unterstützung 12	Firefox Android Vollständige Unterstützung 4	Opera Android Vollständige Unterstützung Ja	Safari iOS Vollständige Unterstützung 7.1	Samsung Internet Android Vollständige Unterstützung Ja
`ex` unit	Chrome Vollständige Unterstützung Ja	Edge Vollständige Unterstützung Ja	Firefox Vollständige Unterstützung Ja	IE Vollständige Unterstützung Ja	Opera Vollständige Unterstützung Ja	Safari Vollständige Unterstützung Ja	WebView Android Vollständige Unterstützung Ja	Chrome Android Vollständige Unterstützung Ja	Edge Mobile Vollständige Unterstützung Ja	Firefox Android Vollständige Unterstützung Ja	Opera Android Vollständige Unterstützung Ja	Safari iOS Vollständige Unterstützung Ja	Samsung Internet Android Vollständige Unterstützung Ja
`ic` unit Experimentell	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Keine Unterstützung Nein	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Edge Mobile Keine Unterstützung Nein	Firefox Android Keine Unterstützung Nein	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein
`lh` unit Experimentell	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Keine Unterstützung Nein	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Edge Mobile Keine Unterstützung Nein	Firefox Android Keine Unterstützung Nein	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein
`mozmm` unit ExperimentellNicht standardisiert	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Keine Unterstützung 4 — 59	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Edge Mobile Keine Unterstützung Nein	Firefox Android ?	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein
`Q` unit Experimentell	Chrome Vollständige Unterstützung 63	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 49	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 50	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 63	Chrome Android Vollständige Unterstützung 63	Edge Mobile Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 49	Opera Android Vollständige Unterstützung 50	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein
`rem` unit	Chrome Vollständige Unterstützung 4	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 3.6	IE Vollständige Unterstützung 9	Opera Vollständige Unterstützung 11.6	Safari Vollständige Unterstützung 4.1	WebView Android Vollständige Unterstützung 2	Chrome Android Vollständige Unterstützung Ja	Edge Mobile Vollständige Unterstützung 12	Firefox Android Vollständige Unterstützung 4	Opera Android Vollständige Unterstützung 12	Safari iOS Vollständige Unterstützung 4	Samsung Internet Android Vollständige Unterstützung Ja
`rlh` unit Experimentell	Chrome Keine Unterstützung Nein	Edge Vollständige Unterstützung Ja	Firefox Keine Unterstützung Nein	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Edge Mobile Vollständige Unterstützung Ja	Firefox Android Keine Unterstützung Nein	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein
`vb` unit Experimentell	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Keine Unterstützung Nein	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Edge Mobile Keine Unterstützung Nein	Firefox Android Keine Unterstützung Nein	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein
`vh` unit	Chrome Vollständige Unterstützung 20	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 19	IE Vollständige Unterstützung 9	Opera Vollständige Unterstützung 20	Safari Vollständige Unterstützung 6	WebView Android Vollständige Unterstützung Ja	Chrome Android Vollständige Unterstützung Ja	Edge Mobile Vollständige Unterstützung 12	Firefox Android Vollständige Unterstützung 19	Opera Android Vollständige Unterstützung Ja	Safari iOS Vollständige Unterstützung 6	Samsung Internet Android Vollständige Unterstützung Ja
`vi` unit Experimentell	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Keine Unterstützung Nein	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Edge Mobile Keine Unterstützung Nein	Firefox Android Keine Unterstützung Nein	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein
`vmax` unit	Chrome Vollständige Unterstützung 26	Edge ?	Firefox Vollständige Unterstützung 19	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 20	Safari Vollständige Unterstützung Ja	WebView Android Vollständige Unterstützung 1.5	Chrome Android Vollständige Unterstützung Ja	Edge Mobile ?	Firefox Android Vollständige Unterstützung 19	Opera Android Keine Unterstützung Nein	Safari iOS Vollständige Unterstützung 4	Samsung Internet Android Vollständige Unterstützung Ja
`vmin` unit	Chrome Vollständige Unterstützung 20	Edge ?	Firefox Vollständige Unterstützung 19	IE Vollständige Unterstützung 10 Vollständige Unterstützung 10 Vollständige Unterstützung 9 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `vm`	Opera Vollständige Unterstützung 20	Safari Vollständige Unterstützung Ja	WebView Android Vollständige Unterstützung Ja	Chrome Android Vollständige Unterstützung Ja	Edge Mobile ?	Firefox Android Vollständige Unterstützung 19	Opera Android Keine Unterstützung Nein	Safari iOS Vollständige Unterstützung 6	Samsung Internet Android Vollständige Unterstützung Ja
`vw` unit	Chrome Vollständige Unterstützung 20	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 19	IE Vollständige Unterstützung 9	Opera Vollständige Unterstützung 20	Safari Vollständige Unterstützung 6	WebView Android Vollständige Unterstützung Ja	Chrome Android Vollständige Unterstützung Ja	Edge Mobile Vollständige Unterstützung 12	Firefox Android Vollständige Unterstützung 19	Opera Android Vollständige Unterstützung Ja	Safari iOS Vollständige Unterstützung 6	Samsung Internet Android Vollständige Unterstützung Ja
Viewport-percentage lengths invalid in `@page`	Chrome ?	Edge ?	Firefox Vollständige Unterstützung 21	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android Vollständige Unterstützung 21	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`1in` is always equal to `96px`	Chrome Vollständige Unterstützung Ja	Edge ?	Firefox Vollständige Unterstützung 4	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Kompatibilität unbekannt: Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.: Experimentell. Das Verhalten kann sich zukünftig ändern.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.: Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Siehe Implementierungshinweise.: Siehe Implementierungshinweise.
Verwendet einen nicht standardisierten Namen.: Verwendet einen nicht standardisierten Namen.