<length>

Übersicht

Der Wert <length> besteht aus einer Längenangabe. Diese setzt sich aus Zusammen aus <number> und einer Masseinheit (px, em, pc, in, mm, …). Dazwischen darf sich keinen Leerschlag oder ein anderes Zeichen befinden.

Der Wert <length> wird von vielen Eigenschaften benutzt, bspw. width, margin, padding, font-size, border-width, text-shadow…

Einige Eingenschaften lassen keine negative Werte zu, andere hingegen schon. In eingigen Fällen wird auch der Wert <percentage> akzeptiert, auch wenn dieser nicht zu den <length> Werten gehört.

Interpolation

Values of the <length> CSS data type can be interpolated in order to allow animations. In that case they are interpolated as real, floating-point, numbers. The interpolation happens on the calculated value. The speed of the interpolation is determined by the timing function associated with the animation.

Werte

Relative Längenangaben

Relativ zur Schriftgrösse

ch

Breite der Null ("0") der aktuellen Schriftart.

width:15ch;

em

Schriftgrößen, 1em = aktuelle Schriftgröße

font-size: 12px;
height: 3em; => height: 36px

width:15em;

ex

Schrifthöhe, 1ex = aktuelle Schrifthöhe

width:15ex;

rem

Die Schriftgröße des Wurzelelements (z.B. die Schriftgröße des html Elements) .

width:15rem;

Relativ zum Viewport

Die Viewport Werte werden vom sichtbaren Teil des Dokuments abgeleitet. Sie sind also abhängig von der Festergrösse, bzw. der Grösse des Anzeigegeräts. Gecko ist dabei der einzige Browser, der die Werte bei einer Veränderung anpasst.

Inerhalb einer @page Regel sind Viewport-Werte nicht zulässig und werden ignoriert.

vh: Ein Hunderstel der Viewport Höhe.
vw: Ein Hunderstel der Viewport Breite.
vmin: Ein Hunderstel des kleineren der beiden Werte von Höhe und Breite des Viewports.
vmax: Ein Hunderstel des größeren der beiden Werte von Höhe und Breite des Viewports.

Absolute Längenangaben

px: Pixel, je nach Anzeigegerät
width:150px;
cm: Zentimeter
width:10cm;
mm: Millimeter, 1mm = 0,1cm
width:10mm;
in: Zoll, 1in = 2.54cm
width:10in;
pc: Picas, 1pc = 12pt = 1/6in
width:10pc;
pt: Punkte, 1pt = 1/72in
width:10pt;
mozmm: Berechnet unter berücksichtigung der Auflösung genau einen Millimenter.

Absolute Werte, mit ausnahme von mozmm Sind immer abhängig von der Auflösung des Anzeigegeräts.

Der Wert in bspw. ist nicht immer ein Zoll, sondern entspricht 96px. Der Wert entspricht nur einem Zoll auf einer Anzeige von 96dpi, bei anderen Auflösungen variiert der Wert entsprechend.

Spezifikations

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

Feature	Chrome (WebKit)	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1	1.0 (1.7 oder früher)	3.0	3.5	1.0
`ch`	27	1.0 (1.7 oder früher) [1]	9.0	Nicht unterstützt	Nicht unterstützt
`rem`	4 (532.3)	3.6 (1.9.2)	9.0	11.6	4.1
`vh, vw`	20	19 (19)	9.0	Nicht unterstützt	6.0
`vmin`	20	19 (19)	9.0 (with the non-standard name `vm`)	Nicht unterstützt	6.0
`vmax`	26	19 (19)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt (537.30)
Viewport-percentage lengths invalid in `@page`	?	21 (21)	?	?	?
`mozmm`	Nicht unterstützt	4.0 (2.0)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`1in` always is `96dpi`	(Ja)	4.0 (2.0)	(Ja)	(Ja)	(Ja)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	(Ja)	(Ja)	(Ja)	(Ja)	(Ja)
`ch`	Nicht unterstützt	(Ja)	?	?	?
`rem`	2.1	(Ja)	?	12.0	4
`vh, vw, vmin`	(Ja)	19.0 (19)	?	Nicht unterstützt	6.0
`vmax`	Nicht unterstützt (bug 91440)	19.0 (19)	?	Nicht unterstützt	Nicht unterstützt (bug 91440)
Viewport-percentage lengths invalid in `@page`	?	21.0 (21.0)	?	?	?

[1] In Gecko 1.0-1.9.0 (Firefox 1.0-3.0) ch was the width of 'M' and it didn't work for border-width and outline-width CSS properties.