<length>

Diese Übersetzung ist unvollständig. Bitte helfen Sie uns, diesen Artikel aus dem Englischen zu übersetzen

Ü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, marginpadding, 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 Fluss der Seitenelemente unabhängig von der vom Benutzer gewählten Schriftgröße einheitlich zu gewährleisten.
rem
Wie em, bezieht sich jedoch immer auf die berechnete Schriftgröße des Wurzelelements.
ex
1ex enspricht üblicherweise der Höhe des kleinen x; oftmals ist 1ex ≈ 0,5em.
ch
1ch enspricht der Breite der Ziffer '0' (Null, Unicode U+0030)
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.
ic
Größe des "水"-Zeichens (CJK "Wasser"-Ideograph U+6C34) in der aktuellen Schriftart.

Relativ zum Viewport

Diese Werte werden vom sichtbaren Teil des Dokuments abgeleitet, dem Anzeigebereich (Englisch: Viewport). 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 (vh = viewport height).
vw
1vw entspricht 1% Anzeigenbreite (vh = viewport width).
vi 
Entspricht 1% der Länge der Inlineachse des umgebenden Blocks. Die Inlineachse ist die Richtung, in der Text geschrieben wird, also horizontal für deutschen Text.
vi 
Entspricht 1% der Länge der Blockachse des umgebenden Blocks. Die Blockachse verläuft im Winkel von 90° zur Inlineachse, also vertikal für deutschen Text.
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 gegebene 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 (Englisch: Inch). Von ihnen abhängig ist die Einheit px, sie ist definiert als 1/96 eines Zolls.

Hinweis: Viele Benutzer erhöhen die Standardschriftgröße ihres Browsers zur besseren Lesbarkeit. Absolute Schriftgrößen können Probleme mit der Barrierefreiheit verursachen, weil sie nicht von den Benutzereinstellungen der Schriftgröße abhängen. Es wird deshalb empfohlen, relative Schriftgrößen wie em und rem zu benutzen, selbst für allgemeine Schriftgrößendefinitionen auf p- oder body-Ebene.

px
Pixel, abhängig vom Anzeigegerät. Auf herkömmlichen Bildschirmen entspricht 1px in der Regel einem physischen Pixel des Bildschirms.
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.
cm
Zentimeter
mm
Millimeter
in
Zoll (Englisch: Inch). 1 Zoll = 2,54cm
pc
Picas. 1pc = 12pt = 1/6in
pt
Punkt, ein Wert aus dem Druckgewerbe. 1pt = 1/72in. pt wird häufig für Schriftgrößen auch in anderen Anwendungen verwendet.
mozmm
Experimentelle Maßeinheit, die unter Berücksichtigung der Auflösung des Anzeigegeräts immer exakten Millimetern entspricht.

Beispiel

HTML

<div style="width: 10em;">10em</div>
<div style="width: 10ex;">10ex</div>
<div style="width: 10ch;">10ch</div>
<div style="width: 10vh;">10vh</div>
<div style="width: 10vw;">10vw</div>
<div style="width: 10vmin;">10vmin</div>
<div style="width: 10vmax;">10vmax</div>
<div style="width: 100px;">100px</div>
<div style="width: 10cm;">10cm</div>
<div style="width: 10mm;">10mm</div>
<div style="width: 10in;">10in</div>
<div style="width: 10pc;">10pc</div>
<div style="width: 50pt;">50pt</div>

CSS

div {
    background-color: green;
    margin: 6px;
}

Ergebnis

Spezifikationen

Spezifikation Status Anmerkung
CSS Values and Units Module Level 4 Bearbeiterentwurf vi, vb, ic, lh, und rlh hinzugefügt.
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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
<length>Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 3Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
Q unitChrome Vollständige Unterstützung 63Edge Vollständige Unterstützung 79Firefox Vollständige Unterstützung 49IE Keine Unterstützung NeinOpera Vollständige Unterstützung 50Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 63Chrome Android Vollständige Unterstützung 63Firefox Android Vollständige Unterstützung 49Opera Android Vollständige Unterstützung 46Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 8.0
cap unitChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
ch unitChrome Vollständige Unterstützung 27Edge Vollständige Unterstützung 12Firefox 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 9Opera Vollständige Unterstützung 20Safari Vollständige Unterstützung 7WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 27Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 7Samsung Internet Android Vollständige Unterstützung 1.5
ex unitChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
ic unitChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
lh unitChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
mozmm unit
Nicht standardisiert
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung 4 — 59IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung 4 — 59Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
rem unitChrome Vollständige Unterstützung 4Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.6IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 11.6Safari Vollständige Unterstützung 5WebView Android Vollständige Unterstützung 2Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 12Safari iOS Vollständige Unterstützung 4Samsung Internet Android Vollständige Unterstützung 1.0
rlh unitChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
vb unitChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
vh unitChrome Vollständige Unterstützung 20Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 19
Hinweise
Vollständige Unterstützung 19
Hinweise
Hinweise Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 20Safari Vollständige Unterstützung 6WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 25Firefox Android Vollständige Unterstützung 19
Hinweise
Vollständige Unterstützung 19
Hinweise
Hinweise Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 6Samsung Internet Android Vollständige Unterstützung 1.5
vi unitChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
vmax unitChrome Vollständige Unterstützung 26Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 19
Hinweise
Vollständige Unterstützung 19
Hinweise
Hinweise Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15Safari Vollständige Unterstützung 6.1WebView Android Vollständige Unterstützung 1.5Chrome Android Vollständige Unterstützung 26Firefox Android Vollständige Unterstützung 19
Hinweise
Vollständige Unterstützung 19
Hinweise
Hinweise Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 6.1Samsung Internet Android Vollständige Unterstützung 1.5
vmin unitChrome Vollständige Unterstützung 26Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: vm
Firefox Vollständige Unterstützung 19
Hinweise
Vollständige Unterstützung 19
Hinweise
Hinweise Starting with version 21, viewport-percentage lengths are invalid in @page.
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 15Safari Vollständige Unterstützung 6.1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 26Firefox Android Vollständige Unterstützung 19
Hinweise
Vollständige Unterstützung 19
Hinweise
Hinweise Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 6.1Samsung Internet Android Vollständige Unterstützung 1.5
vw unitChrome Vollständige Unterstützung 20Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 19
Hinweise
Vollständige Unterstützung 19
Hinweise
Hinweise Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 20Safari Vollständige Unterstützung 6WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 25Firefox Android Vollständige Unterstützung 19
Hinweise
Vollständige Unterstützung 19
Hinweise
Hinweise Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 6Samsung Internet Android Vollständige Unterstützung 1.5

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
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.