---
title: <length>
slug: Web/CSS/length
tags:
  - CSS
  - CSS Datentyp
  - Layout
  - Länge
  - Referenz
  - Web
  - length
translation_of: Web/CSS/length
---
<div>{{ CSSRef() }}</div>

<h2 id="Übersicht">Übersicht</h2>

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

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

<p><code>&lt;length&gt;</code> wird von vielen Eigenschaften benutzt, zum Beispiel {{ Cssxref("width") }}, {{ Cssxref("margin") }},  {{ Cssxref("padding") }}, {{ Cssxref("font-size") }}, {{ Cssxref("border-width") }} und {{ Cssxref("text-shadow") }}.</p>

<h2 id="Interpolation">Interpolation</h2>

<p><code>&lt;length&gt;</code>-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 <a href="/en/CSS/timing-function" title="timing-function">Zeitfunktion</a> ab.</p>

<h2 id="Einheiten">Einheiten</h2>

<h3 id="Relative_Längenmaße">Relative Längenmaße</h3>

<h4 id="Relativ_zur_Schriftgröße">Relativ zur Schriftgröße</h4>

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

<dl>
 <dt id="em"><code>em</code></dt>
 <dd><code>1em</code> entspricht der aus {{Cssxref("font-size")}} berechneten Schriftgröße. Wird em zusammen mit {{Cssxref("font-size")}} selbst benutzt, entspricht <code>1em</code> der Schriftgröße des Elternelements.<br>
 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.</dd>
 <dt id="rem"><code>rem</code></dt>
 <dd>Wie <code>em</code>, bezieht sich jedoch immer auf die berechnete Schriftgröße des Wurzelelements. {{ gecko_minversion_inline("1.9.2") }}</dd>
 <dt id="ex"><code>ex</code></dt>
 <dd><code>1ex</code> enspricht üblicherweise der Höhe des kleinen x; oftmals ist 1ex ≈ 0,5em<code>.</code></dd>
 <dt id="ch"><code>ch</code></dt>
 <dd><code>1ch</code> enspricht der Breite der Ziffer '0' (Null, Unicode U+0030) {{gecko_minversion_inline("1.9.1") }}</dd>
 <dt id="ch"><code>cap</code> {{experimental_inline}}</dt>
 <dd>Nominale Höhe der Großbuchstaben.</dd>
 <dt><code>lh</code> {{experimental_inline}}</dt>
 <dd>Die aus {{Cssxref("line-height")}} berechnete Zeilenhöhe.</dd>
 <dt><code>rlh</code> {{experimental_inline}}</dt>
 <dd>Wie lh, bezieht sich jedoch immer auf die berechnete Zeilenhöhe des Wurzelelements.</dd>
 <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ic</span></font> {{experimental_inline}}</dt>
 <dd>Größe des "水"-Zeichens (CJK "Wasser"-Ideograph U+6C34) in der aktuellen Schriftart.</dd>
</dl>

<h4 id="Relativ_zum_Viewport">Relativ zum Viewport</h4>

<p>Diese Werte werden vom sichtbaren Teil des Dokuments abgeleitet, dem Anzeigebereich (Englisch: Viewport). Sie sind also abhängig von der Fenster- bzw. Bildschirmgröße.</p>

<p>Innerhalb einer {{cssxref("@page")}}-Regel sind Viewport-Werte nicht zulässig.</p>

<dl>
 <dt id="vh"><code>vh</code></dt>
 <dd><code>1vh</code> entspricht 1% der Anzeigenhöhe (vh = viewport height).</dd>
 <dt id="vw"><code>vw</code></dt>
 <dd><code>1vw</code> entspricht 1% Anzeigenbreite (vh = viewport width).</dd>
 <dt><code>vi</code> {{experimental_inline}}</dt>
 <dd>Entspricht 1% der Länge der <a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/CSS_Logical_Properties">Inlineachse</a> des umgebenden Blocks. Die Inlineachse ist die Richtung, in der Text geschrieben wird, also horizontal für deutschen Text.</dd>
 <dt><code>vi</code> {{experimental_inline}}</dt>
 <dd>Entspricht 1% der Länge der <a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/CSS_Logical_Properties">Blockachse</a> des umgebenden Blocks. Die Blockachse verläuft im Winkel von 90° zur Inlineachse, also vertikal für deutschen Text.</dd>
 <dt id="vmin"><code>vmin</code></dt>
 <dd>Der kleinere der Werte <code>vh</code> und <code>vw</code>.</dd>
 <dt id="vmax"><code>vmax</code></dt>
 <dd>Der größere der Werte <code>vh</code> und <code>vw</code>.</dd>
</dl>

<h3 id="Absolute_Längenmaße">Absolute Längenmaße</h3>

<p>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.</p>

<p>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.<br>
 Ein Referenzpixel entspricht <code>1px</code>, alle anderen Einheiten sind bei niedrig auflösenden Geräten von px abgeleitet.  <code>1in</code> ist in Abhängigkeit von px als <code>96px</code> festgelegt, was wiederum <code>72pt</code> entspricht.</p>

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

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

<div class="blockIndicator note">
<p><strong>Hinweis:</strong> 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 <code>em</code> und <code>rem</code> zu benutzen, selbst für allgemeine Schriftgrößendefinitionen auf <code>p</code>- oder <code>body</code>-Ebene.</p>
</div>

<dl>
 <dt id="px"><code>px</code></dt>
 <dd>Pixel, abhängig vom Anzeigegerät. Auf herkömmlichen Bildschirmen entspricht <code>1px</code> in der Regel einem physischen Pixel des Bildschirms.<br>
 Bei hochauflösenden Geräten wird die Anzahl physischer Pixel so bemessen, dass 1 Zoll ungefähr 96px entspricht, also für <code>px</code> eine theoretische Auflösung von 96dpi beibehalten wird.</dd>
 <dt id="cm"><code>cm</code></dt>
 <dd>Zentimeter</dd>
 <dt id="mm"><code>mm</code></dt>
 <dd>Millimeter</dd>
 <dt id="in"><code>in</code></dt>
 <dd>Zoll (Englisch: Inch). 1 Zoll = 2,54cm</dd>
 <dt id="pc"><code>pc</code></dt>
 <dd>Picas. 1pc = 12pt = 1/6in</dd>
 <dt id="pt"><code>pt</code></dt>
 <dd>Punkt, ein Wert aus dem Druckgewerbe. 1pt = 1/72in. pt wird häufig für Schriftgrößen auch in anderen Anwendungen verwendet.</dd>
 <dt id="mozmm"><code>mozmm</code> {{ non-standard_inline() }}</dt>
 <dd>Experimentelle Maßeinheit, die unter Berücksichtigung der Auflösung des Anzeigegeräts <em>immer</em> exakten Millimetern entspricht.</dd>
</dl>

<h2 id="Beispiel">Beispiel</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div style="width: 10em;"&gt;10em&lt;/div&gt;
&lt;div style="width: 10ex;"&gt;10ex&lt;/div&gt;
&lt;div style="width: 10ch;"&gt;10ch&lt;/div&gt;
&lt;div style="width: 10vh;"&gt;10vh&lt;/div&gt;
&lt;div style="width: 10vw;"&gt;10vw&lt;/div&gt;
&lt;div style="width: 10vmin;"&gt;10vmin&lt;/div&gt;
&lt;div style="width: 10vmax;"&gt;10vmax&lt;/div&gt;
&lt;div style="width: 100px;"&gt;100px&lt;/div&gt;
&lt;div style="width: 10cm;"&gt;10cm&lt;/div&gt;
&lt;div style="width: 10mm;"&gt;10mm&lt;/div&gt;
&lt;div style="width: 10in;"&gt;10in&lt;/div&gt;
&lt;div style="width: 10pc;"&gt;10pc&lt;/div&gt;
&lt;div style="width: 50pt;"&gt;50pt&lt;/div&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">div {
    background-color: green;
    margin: 6px;
}
</pre>

<h3 id="Ergebnis">Ergebnis</h3>

<p>{{ EmbedLiveSample('Beispiel', '', '', '', 'Web/CSS/length') }}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Spezifikation</th>
   <th>Status</th>
   <th>Anmerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Values', '#lengths', '')}}</td>
   <td>{{Spec2('CSS4 Values')}}</td>
   <td><code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, und <code>rlh</code> hinzugefügt.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Values', '#lengths', '&lt;length&gt;') }}</td>
   <td>{{ Spec2('CSS3 Values') }}</td>
   <td><code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code> hinzugefügt</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td><code>pt</code>, <code>pc</code>, <code>px</code> definiert</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#length-units', '&lt;length&gt;') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>

<p>{{Compat("css.types.length")}}</p>