Intrinsische Größe

In CSS ist die intrinsische Größe eines Elements die Größe, die es basierend auf seinem Inhalt hätte, ohne die Auswirkungen des Kontextes zu berücksichtigen, in dem es erscheint. Dazu gehört zum Beispiel die Größenregelung durch die Eigenschaften des Box-Modells in CSS. Die intrinsischen Größen eines Elements werden durch seine min-content- und max-content-Größen dargestellt.

Inline-Elemente sind intrinsisch dimensioniert: Größen und Box Eigenschaften wie height, width, block-size, inline-size, und padding-block und margin-block haben keinen Einfluss auf sie (obwohl margin-inline und padding-inline dies tun).

Zum Beispiel ist die minimale intrinsische Größe des inline <span>-Elements die minimale Größe, die es hätte, wenn es gefloatet wäre (ohne dass andere CSS-Boxen-Eigenschaften angewendet werden), in einem Container mit einer Inline-Größe von 0px. Die maximale intrinsische Größe ist das Gegenteil. Es ist die Größe, die das gleiche <span> hätte, wenn die Inline-Größe seines Containers unendlich wäre.

Die intrinsische Größe hat für Bilder die gleiche Bedeutung wie für Text — die Größe, in 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 angenommen, dass Bilder eine "1x" Pixeldichte haben (1 Gerätepixel = 1 CSS-Pixel), in welchem Fall die intrinsische Größe einfach der Pixelhöhe und -breite entspricht. Die intrinsische Größe und Auflösung eines Bildes kann explizit in seinen EXIF Daten angegeben werden. Die Pixeldichte von Bildern kann auch mit dem 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 Berechnung sind im CSS Sizing-Modul definiert.

Minimale intrinsische Größe

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

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

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, ohne weichen Umbruch, selbst wenn er seinen Container überfluten würde. 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>

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