Intrinsische Größe

In CSS bezieht sich die intrinsische Größe eines Elements auf die Größe, die es basierend auf seinem Inhalt hätte, ohne die Auswirkungen des Layoutkontexts, in dem es erscheint, zu berücksichtigen. Dies ist das Gegenteil der extrinsischen Größe eines Elements, die durch externe Einschränkungen wie die Containergröße bestimmt wird. Die intrinsischen Größen eines Elements werden durch seine min-content und max-content Größen dargestellt.

Inline-Elemente werden intrinsisch dimensioniert. CSS-Boxmodell-Eigenschaften wie height, width, block-size, inline-size, padding-block und margin-block haben keine Auswirkungen auf ihr Layout (obwohl margin-inline und padding-inline den Abstand innerhalb einer Zeile beeinflussen).

Zum Beispiel ist die minimale intrinsische Größe des Inline-<span>-Elements die kleinste Größe, die es hätte, wenn es in einem Container mit inline-size: 0 schwebte (ohne andere CSS-Box-Eigenschaften). Die maximale intrinsische Größe ist das Gegenteil; es ist die Größe, die das gleiche <span> hätte, wenn es in einem Container mit unendlicher inline-size platziert würde.

Die intrinsische Größe hat für Bilder dieselbe Bedeutung wie für Text – die Größe, bei der die Bilder angezeigt werden, wenn kein CSS angewendet wird, um die Darstellung zu ändern.

Pixeldichte und Auflösung beeinflussen die intrinsische Größe. Standardmäßig wird davon ausgegangen, dass Bilder eine "1x"-Pixeldichte haben (1 Gerätepixel = 1 CSS-Pixel), in welchem Fall die intrinsische Größe einfach die Pixelhöhe und -breite ist. Die intrinsische Größe und Auflösung eines Bildes kann explizit in seinen EXIF-Daten angegeben werden. Die Pixeldichte von Bildern kann auch über das srcset Attribut festgelegt werden. Beachten Sie, dass, wenn beide Mechanismen verwendet werden, der srcset-Wert "über" dem EXIF-Wert angewendet wird.

Intrinsische Größen und ihre Berechnungsweise sind im Modul CSS Box Sizing definiert.

Minimale intrinsische Größe

Um ein Element entsprechend seiner minimalen intrinsischen Größe festzulegen, setzen Sie die inline-size (oder width in horizontalen Schreibrichtungen, wie Englisch und Hebräisch) auf min-content. Dies stellt das Element auf die Größe ein, die es hätte, wenn der Text in inline-Richtung so klein wie möglich umbrochen wäre, ohne einen Überlauf zu verursachen, und mit so viel weichem Umbruch wie möglich. Für eine Box, die eine Textzeichenfolge enthält, würde die minimale intrinsische Größe durch das längste Wort definiert.

<p>Text wraps, making the element only as wide as its longest word.</p>

css

p {
  inline-size: min-content;
  background-color: palegoldenrod;
}

Maximale intrinsische Größe

Die maximale intrinsische Größe ist das Gegenteil. Es ist die Größe des Elements, wenn die Inline-Größe des Containers unendlich wäre. Textinhalt würde so breit wie möglich angezeigt werden, ohne weichen Umbruch, selbst wenn er seinen Container überläuft. Der Schlüsselwortwert max-content setzt dieses Verhalten.

<p>Element grows as text doesn't wrap.</p>
<p>
  This paragraph may be wider than the width of the entire page and yet it won't
  wrap because <code>width: max-content</code> is set. It therefore may overflow
  its container.
</p>

css

p {
  width: max-content;
  background-color: palegoldenrod;
}

Siehe auch

Verwandte Glossarbegriffe:
- Extrinsische Größe
CSS min-content, max-content und fit-content Größen-Schlüsselwörter
interpolate-size
aspect-ratio
calc-size()
CSS Box Sizing Modul
CSS Box Sizing Module Level 3 Spezifikation

Help improve MDN

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

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