<length>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

{"* "}Some parts of this feature may have varying levels of support.

Der <length> CSS Datentyp repräsentiert einen Distanzwert. Längen können in zahlreichen CSS-Eigenschaften verwendet werden, wie z.B. width, height, margin, padding, border-width, font-size und text-shadow.

Hinweis: Obwohl <percentage>-Werte in einigen der gleichen Eigenschaften verwendbar sind, die <length>-Werte akzeptieren, sind sie nicht selbst <length>-Werte. Siehe <length-percentage>.

Syntax

Der <length>-Datentyp besteht aus einer <number> gefolgt von einer der unten aufgelisteten Einheiten. Wie bei allen CSS-Dimensionen gibt es keinen Abstand zwischen der Zahl und dem Einheitliteral. Die Angabe der Längeneinheit ist optional, wenn die Zahl 0 ist.

Hinweis: Einige Eigenschaften erlauben negative <length>-Werte, andere wiederum nicht.

Der angegebene Wert einer Länge (angegebene Länge) wird durch seine Menge und Einheit repräsentiert. Der berechnete Wert einer Länge (berechnete Länge) ist die angegebene Länge, die zu einer absoluten Länge aufgelöst wird, und ihre Einheit wird nicht unterschieden.

Die <length>-Einheiten können relativ oder absolut sein. Relative Längen repräsentieren eine Messung in Bezug auf eine andere Distanz. Abhängig von der Einheit kann diese Distanz die Größe eines bestimmten Zeichens, die Zeilenhöhe oder die Größe des Viewports sein. Stylesheets, die relative Längeneinheiten verwenden, können einfacher von einer Ausgabemedium zu einem anderen skaliert werden.

Hinweis: Kindelemente erben nicht die relativen Werte, die für ihr Elternelement angegeben sind; sie erben die berechneten Werte.

Relative Längeneinheiten

CSS-Relative Längeneinheiten basieren auf Schriftart-, Container- oder Viewportgröße.

Relative Längeneinheiten auf Basis von Schriftarten

Schriftlängen definieren den <length>-Wert anhand der Größe eines bestimmten Zeichens oder Schriftattributs in der momentan wirksamen Schriftart in einem Element oder seinem Elternelement.

Hinweis: Diese Einheiten, insbesondere em und die wurzelverwandte rem, werden häufig verwendet, um skalierbare Layouts zu erstellen, die den vertikalen Rhythmus der Seite beibehalten, auch wenn der Benutzer die Schriftgröße ändert.

cap: Repräsentiert die "Cap-Höhe" (nominale Höhe von Großbuchstaben) der font des Elements.
ch: Repräsentiert die Breite oder genau gesagt das Advance Measure des Glyphen 0 (null, das Unicode-Zeichen U+0030) in der font des Elements. In Fällen, in denen das Messen des 0-Glyphen unmöglich oder unpraktisch ist, muss angenommen werden, dass es 0.5em breit und 1em hoch ist.
em: Repräsentiert die berechnete font-size des Elements. Wenn es auf die font-size-Eigenschaft selbst angewendet wird, repräsentiert es die geerbte Schriftgröße des Elements.
ex: Repräsentiert die x-Höhe der font des Elements. In Schriftarten mit dem Buchstaben x ist dies im Allgemeinen die Höhe der Kleinbuchstaben in der Schriftart; 1ex ≈ 0.5em in vielen Schriftarten.
ic: Entspricht dem verwendeten Advance Measure des "水"-Glyphen (CJK-Wasserideogramm, U+6C34), das in der zur Darstellung verwendeten Schriftart gefunden wird.
lh: Entspricht dem berechneten Wert der line-height-Eigenschaft des Elements, auf dem es angewendet wird, konvertiert zu einer absoluten Länge. Diese Einheit ermöglicht Längenberechnungen basierend auf der theoretischen Größe einer idealen leeren Zeile. Die Größe tatsächlicher Zeilenboxen kann jedoch je nach Inhalt variieren.

Relative Längeneinheiten basierend auf der Schriftart des Wurzelelements

Schriftartenrelativen Längeneinheiten des Wurzelelements definieren den <length>-Wert anhand der Größe eines bestimmten Zeichens oder Schriftattributs des Wurzelelements:

rcap: Entspricht der "Cap-Höhe" (nominale Höhe der Großbuchstaben) der font des Wurzelelements.
rch: Entspricht der Breite oder dem Advance Measure des Glyphen 0 (null, das Unicode-Zeichen U+0030) in der font des Wurzelelements.
rem: Repräsentiert die font-size des Wurzelelements (typischerweise <html>). Wenn es innerhalb der font-size des Wurzelelements verwendet wird, repräsentiert es seinen Anfangswert. Der Standardwert in Browsern ist häufig 16px, aber benutzerdefinierte Einstellungen können diesen ändern.
rex: Repräsentiert die x-Höhe der font des Wurzelelements.
ric: Entspricht dem Wert der ic-Einheit auf der Schriftart des Wurzelelements.
rlh: Entspricht dem Wert der lh-Einheit auf der Schriftart des Wurzelelements. Diese Einheit ermöglicht Längenberechnungen basierend auf der theoretischen Größe einer idealen leeren Zeile. Die Größe tatsächlicher Zeilenboxen kann jedoch je nach Inhalt variieren.

Relative Längeneinheiten basierend auf dem Viewport

Die Viewport-Prozentualen Längeneinheiten basieren auf vier verschiedenen Ansichten: klein, groß, dynamisch und Standard. Die Erlaubnis für unterschiedliche Viewport-Größen reagiert auf die dynamische Erweiterung und Rücknahme von Browseroberflächen und das Verbergen und Anzeigen des darunterliegenden Inhalts.

Kleine Viewport-Einheiten

Wenn die kleinste mögliche Ansicht als Reaktion auf die dynamische Erweiterung von Browseroberflächen erwünscht ist, sollte die kleine Viewport-Größe verwendet werden. Die kleine Viewport-Größe ermöglicht es, den Inhalt so zu gestalten, dass er den gesamten Viewport füllt, wenn die Browseroberflächen erweitert werden. Bei Auswahl dieser Größe kann es auch möglich sein, dass Leerflächen verbleiben, wenn die Browseroberflächen sich zusammenziehen.

Zum Beispiel wird ein Element, das mit Viewport-Prozentualen Einheiten basierend auf der kleinen Viewport-Größe dimensioniert ist, den Bildschirm perfekt ohne jeglichen Inhalt verdecken, wenn alle dynamischen Browseroberflächen angezeigt werden. Wenn diese Browseroberflächen jedoch ausgeblendet werden, kann zusätzlicher Platz um das Element sichtbar werden. Daher sind die kleinen Viewport-Prozentualen Einheiten im Allgemeinen "sicherer" zu verwenden, können jedoch nicht das attraktivste Layout erzeugen, nachdem ein Benutzer begonnen hat, mit der Seite zu interagieren.

Die kleine Viewport-Größe wird durch das Präfix sv dargestellt und führt zu den sv*-Viewport-Prozentualen Längeneinheiten. Die Größen der kleinen Viewport-Prozentualen Einheiten sind festgelegt und daher stabil, es sei denn, der Viewport selbst wird verändert.

Große Viewport-Einheiten

Wenn die größte mögliche Ansicht als Reaktion auf das dynamische Zurückziehen von Browseroberflächen gewünscht ist, sollte die große Viewport-Größe verwendet werden. Die große Viewport-Größe ermöglicht es, den Inhalt so zu gestalten, dass er den gesamten Viewport füllt, wenn sich die Browseroberflächen zurückziehen. Es muss jedoch beachtet werden, dass der Inhalt verdeckt werden kann, wenn die Browseroberflächen sich erweitern.

Beispiel: Auf Mobiltelefonen, wo Bildschirmfläche von höchster Bedeutung ist, verbergen Browser häufig teilweise oder vollständig die Titel- und Adressleiste, nachdem ein Benutzer mit der Seite zu scrollen beginnt. Wenn ein Element mit einer Viewport-Prozentualen Einheit basierend auf der großen Viewport-Größe dimensioniert wird, wird der Inhalt des Elements die gesamte sichtbare Seite füllen, wenn diese Browseroberflächen verborgen sind. Wenn diese Rückziehbaren Browseroberflächen gezeigt werden, können sie den Inhalt verdecken, der mit den großen Viewport-Prozentualen Einheiten dimensioniert oder positioniert ist.

Die große Viewport-Einheit wird durch das Präfix lv dargestellt und führt zu den lv*-Viewport-Prozentualen Einheiten. Die Größen der großen Viewport-Prozentualen Einheiten sind festgelegt und daher stabil, es sei denn, der Viewport selbst wird verändert.

Dynamische Viewport-Einheiten

Wenn der Viewport automatisch als Reaktion auf die dynamische Erweiterung oder den Rückzug von Browseroberflächen dimensioniert werden soll, können Sie die dynamische Viewport-Größe verwenden. Die dynamische Viewport-Größe ermöglicht es, den Inhalt so zu gestalten, dass er genau innerhalb des Viewports passt, unabhängig von der Anwesenheit dynamischer Browseroberflächen.

Die dynamische Viewport-Einheit wird durch das Präfix dv dargestellt und führt zu den dv*-Viewport-Prozentualen Einheiten. Die Größen der dynamischen Viewport-Prozentualen Einheiten sind nicht stabil, selbst wenn der Viewport selbst unverändert bleibt.

Hinweis: Während die dynamische Viewport-Größe Ihnen mehr Kontrolle und Flexibilität geben kann, kann die Verwendung von Viewport-Prozentualen Einheiten basierend auf der dynamischen Viewport-Größe dazu führen, dass der Inhalt während des Scrollens einer Seite neu dimensioniert wird. Das kann die Benutzeroberfläche beeinträchtigen und zu einem Leistungsverlust führen.

Standard-Viewport-Einheiten

Die Standard-Viewport-Größe wird vom Browser definiert. Das Verhalten der resultierenden Viewport-Prozentualen Einheit könnte gleichwertig mit der Viewport-Prozentualen Einheit basierend auf der kleinen Viewport-Größe, der großen Viewport-Größe, einer Zwischengröße zwischen den beiden oder der dynamischen Viewport-Größe sein.

Hinweis: Beispielsweise könnte ein Browser die Standard-Viewport-Prozentualen Einheit für die Höhe (vh) implementieren, die der großen Viewport-Prozentualen Höheneinheit (lvh) entspricht. In diesem Fall könnte dies den Inhalt auf einer Vollbildanzeige verdecken, während die Browseroberfläche erweitert wird. Derzeit sind alle Standard-Viewport-Einheiten (vh, vw usw.) ihren großen Viewport-Gegenstücken (lvh, lvw usw.) gleichwertig.

Die Viewport-Prozentualen Längen definieren <length>-Werte in Prozent relativ zur Größe des initialen enthältlichen Blocks, der seinerseits auf der Größe des Viewports oder des Seitenbereiches basiert, d.h. dem sichtbaren Teil des Dokuments. Wenn die Höhe oder Breite des initialen enthältlichen Blocks geändert wird, werden die davon basierenden Elemente entsprechend skaliert. Es gibt eine Viewport-Prozentuale Längeneinheit, die jedem der Viewport-Größen entspricht, wie unten beschrieben.

Hinweis: Viewport-Längen sind in @page-Deklarationsblöcken ungültig.

vh

Repräsentiert einen Prozentsatz der Höhe des initialen enthältlichen Blocks des Viewports. 1vh entspricht 1% der Viewporthöhe. Zum Beispiel, wenn die Viewporthöhe 300px ist, dann hat ein Wert von 70vh für eine Eigenschaft 210px.

Die entsprechenden Viewport-Prozentualen Einheiten für kleine, große und dynamische Viewport-Größen sind svh, lvh und dvh. vh entspricht lvh und repräsentiert die Viewport-Prozentuale Längeneinheit basierend auf der großen Viewport-Größe.

vw

Repräsentiert einen Prozentsatz der Breite des initialen enthältlichen Blocks des Viewports. 1vw entspricht 1% der Viewportbreite. Zum Beispiel, wenn die Viewportbreite 800px ist, dann hat ein Wert von 50vw für eine Eigenschaft 400px.

Für kleine, große und dynamische Viewport-Größen sind die entsprechenden Viewport-Prozentualen Einheiten svw, lvw und dvw. vw entspricht lvw und repräsentiert die Viewport-Prozentuale Längeneinheit basierend auf der großen Viewport-Größe.

vmax

Repräsentiert in Prozent den größten Wert von vw und vh.

Für kleine, große und dynamische Viewport-Größen sind die entsprechenden Viewport-Prozentualen Einheiten svmax, lvmax und dvmax. vmax entspricht lvmax und repräsentiert die Viewport-Prozentuale Längeneinheit basierend auf der großen Viewport-Größe.

vmin

Repräsentiert in Prozent den kleinsten Wert von vw und vh.

Für kleine, große und dynamische Viewport-Größen sind die entsprechenden Viewport-Prozentualen Einheiten svmin, lvmin und dvmin. vmin entspricht lvmin und repräsentiert die Viewport-Prozentuale Längeneinheit basierend auf der großen Viewport-Größe.

vb

Repräsentiert den Prozentsatz der Größe des initialen enthältlichen Blocks in Richtung der Block-Achse des Wurzelelements.

Für kleine, große und dynamische Viewport-Größen sind die entsprechenden Viewport-Prozentualen Einheiten svb, lvb und dvb. vb entspricht lvb und repräsentiert die Viewport-Prozentuale Längeneinheit basierend auf der großen Viewport-Größe.

vi

Repräsentiert einen Prozentsatz der Größe des initialen enthältlichen Blocks in Richtung der Inline-Achse des Wurzelelements.

Für kleine, große und dynamische Viewport-Größen sind die entsprechenden Viewport-Prozentualen Einheiten svi, lvi und dvi. vi entspricht lvi und repräsentiert die Viewport-Prozentuale Längeneinheit basierend auf der großen Viewport-Größe.

Container Query Längeneinheiten

Beim Anwenden von Styles auf einen Container über Container-Abfragen können Sie Container-Query-Längeneinheiten verwenden. Diese Einheiten geben eine Länge relativ zu den Abmessungen eines Container-Querys an. Komponenten, die Einheiten der Länge relativ zu ihrem Container verwenden, sind flexibler in unterschiedlichen Containern einsetzbar, ohne konkrete Längenwerte neu berechnen zu müssen.

Wenn kein geeigneter Container für die Abfrage verfügbar ist, fällt die Container-Query-Längeneinheit auf die kleine Viewport-Einheit für diese Achse (sv*) zurück.

Weitere Informationen finden Sie unter Container Queries.

cqw: Repräsentiert einen Prozentsatz der Breite des Abfrage-Containers. 1cqw entspricht 1% der Breite des Abfrage-Containers. Zum Beispiel, wenn die Breite des Abfrage-Containers 800px ist, dann hat ein Wert von 50cqw für eine Eigenschaft 400px.
cqh: Repräsentiert einen Prozentsatz der Höhe des Abfrage-Containers. 1cqh entspricht 1% der Höhe des Abfrage-Containers. Zum Beispiel, wenn die Höhe des Abfrage-Containers 300px ist, dann hat ein Wert von 10cqh für eine Eigenschaft 30px.
cqi: Repräsentiert einen Prozentsatz der Inline-Größe des Abfrage-Containers. 1cqi entspricht 1% der Inline-Größe des Abfrage-Containers. Zum Beispiel, wenn die Inline-Größe des Abfrage-Containers 800px ist, dann hat ein Wert von 50cqi für eine Eigenschaft 400px.
cqb: Repräsentiert einen Prozentsatz der Blockgröße des Abfrage-Containers. 1cqb entspricht 1% der Blockgröße des Abfrage-Containers. Zum Beispiel, wenn die Blockgröße des Abfrage-Containers 300px ist, dann hat ein Wert von 10cqb für eine Eigenschaft 30px.
cqmin: Repräsentiert einen Prozentsatz des kleineren Werts entweder der Inline-Größe oder der Blockgröße des Abfrage-Containers. 1cqmin entspricht 1% des kleineren Werts entweder der Inline-Größe oder der Blockgröße des Abfrage-Containers. Zum Beispiel, wenn die Inline-Größe des Abfrage-Containers 800px beträgt und seine Blockgröße 300px, dann hat ein Wert von 50cqmin für eine Eigenschaft 150px.
cqmax: Repräsentiert einen Prozentsatz des größeren Werts entweder der Inline-Größe oder der Blockgröße des Abfrage-Containers. 1cqmax entspricht 1% des größeren Werts entweder der Inline-Größe oder der Blockgröße des Abfrage-Containers. Zum Beispiel, wenn die Inline-Größe des Abfrage-Containers 800px beträgt und seine Blockgröße 300px, dann hat ein Wert von 50cqmax für eine Eigenschaft 400px.

Absolute Längeneinheiten

Absolute Längeneinheiten repräsentieren eine physikalische Messung, wenn die physikalischen Eigenschaften des Ausgabemediums bekannt sind, wie z.B. für den Drucklayout. Dies wird erreicht, indem eine der Einheiten an eine physikalische Einheit oder die visuelle Winkeleinheit verankert und die anderen relativ zu ihr definiert werden. Physikalische Einheiten umfassen cm, in, mm, pc, pt, px und Q. Die Verankerung erfolgt auf unterschiedliche Weise für Geräte mit niedriger Auflösung, wie Bildschirme, im Vergleich zu solchen mit hoher Auflösung, wie Drucker.

Für Geräte mit niedriger dpi repräsentiert die Einheit px den physischen Referenzpixel; andere Einheiten sind relativ dazu definiert. Somit ist 1in definiert als 96px, was 72pt entspricht. Die Folge dieser Definition ist, dass auf solchen Geräten Dimensionen, die in Zoll (in), Zentimeter (cm) oder Millimeter (mm) beschrieben werden, nicht unbedingt der Größe der physischen Einheit mit demselben Namen entsprechen.

Für Geräte mit hoher dpi sind Zoll (in), Zentimeter (cm) und Millimeter (mm) dasselbe wie ihre physischen Gegenstücke. Daher ist die px-Einheit relativ zu ihnen definiert (1/96 von 1in).

Hinweis: Viele Benutzer vergrößern die Standard-Schriftgröße ihres Benutzeragenten, um den Text lesbarer zu machen. Absolute Längen können Zugänglichkeitsprobleme verursachen, da sie fixiert und nicht entsprechend Benutzereinstellungen skalierbar sind. Aus diesem Grund sollten, wenn font-size festgelegt wird, relative Längen (wie em oder rem) bevorzugt werden.

px: Ein Pixel. Für Bildschirmdisplay repräsentiert es traditionell ein Gerätepixel (Punkt). Jedoch impliziert auf Druckern und Bildschirmen mit hoher Auflösung ein CSS-Pixel mehrere Gerätepixel. 1px = 1in / 96.
cm: Ein Zentimeter. 1cm = 96px / 2.54.
mm: Ein Millimeter. 1mm = 1cm / 10.
Q: Ein Viertel eines Millimeters. 1Q = 1cm / 40.
in: Ein Zoll. 1in = 2.54cm = 96px.
pc: Eine Pica. 1pc = 12pt = 1in / 6.
pt: Ein Punkt. 1pt = 1in / 72.

Interpolation

Bei Animationen werden Werte des <length>-Datentyps als reale, Gleitkommazahlen interpoliert. Die Interpolation erfolgt auf dem berechneten Wert. Die Geschwindigkeit der Interpolation wird durch die Easing-Funktion bestimmt, die mit der Animation verbunden ist.

Beispiele

Vergleich verschiedener Längeneinheiten

Das folgende Beispiel bietet Ihnen ein Eingabefeld, in dem Sie einen <length>-Wert (z.B. 300px, 50%, 30vw) eingeben können, um die Breite eines Ergebnisbalkens festzulegen, der unterhalb erscheint, nachdem Sie die Enter- oder die Return-Taste gedrückt haben.

Dies ermöglicht es Ihnen, die Effekte verschiedener Längeneinheiten zu vergleichen und gegenüberzustellen.

HTML

html

<div class="outer">
  <div class="input-container">
    <label for="length">Enter width:</label>
    <input type="text" id="length" />
  </div>
  <div class="inner"></div>
</div>
<div class="results"></div>

CSS

css

html {
  font-family: sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 50px;
  background-color: #eeeeee;
  position: relative;
}

.inner {
  height: 50px;
  background-color: #999999;
  box-shadow:
    inset 3px 3px 5px rgb(255 255 255 / 50%),
    inset -3px -3px 5px rgb(0 0 0 / 50%);
}

.result {
  height: 20px;
  box-shadow:
    inset 3px 3px 5px rgb(255 255 255 / 50%),
    inset -3px -3px 5px rgb(0 0 0 / 50%);
  background-color: orange;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.result code {
  position: absolute;
  margin-left: 20px;
}

.results {
  margin-top: 10px;
}

.input-container {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}

label {
  margin: 0 10px 0 20px;
}

JavaScript

const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");

inputElem.addEventListener("change", () => {
  inputDiv.style.width = inputElem.value;

  const result = document.createElement("div");
  result.className = "result";
  result.style.width = inputElem.value;
  const code = document.createElement("code");
  code.textContent = `width: ${inputElem.value}`;
  result.appendChild(code);
  resultsDiv.appendChild(result);

  inputElem.value = "";
  inputElem.focus();
});

Ergebnis

Spezifikationen

Specification
CSS Values and Units Module Level 4 # lengths

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden