Intrinsische Größe

In CSS ist die intrinsische Größe eines Elements die Größe, die es basierend rein auf seinem Inhalt hätte, ohne die Auswirkungen des Kontexts zu berücksichtigen, in dem es erscheint. Zum Beispiel die Größenanpassung, die durch CSS-Boxmodell-Eigenschaften angewendet wird. Die intrinsischen Größen eines Elements werden durch seine min-content und max-content Größen dargestellt.

Inline-Elemente sind intrinsisch dimensioniert: Größenanpassung und Box-Eigenschaften einschließlich height, width, block-size, inline-size, sowie 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 andere CSS-Box-Eigenschaften anzuwenden), 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>-Element hätte, wenn die Inline-Größe seines Containers unendlich wäre.

Intrinsische Größe hat für Bilder dieselbe 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äte-Pixel = 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 eines Bildes 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 wie sie berechnet werden, sind im CSS Sizing Module 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 setzt das Element auf die Größe, die es hätte, wenn der Text so klein wie möglich in der Inline-Richtung ohne Überlauf umgebrochen wäre, mit so viel weichem Umbruch wie möglich. Für eine Box, die eine Textzeichenkette enthält, wäre 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>

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 den Container überläuft. Der Schlüsselwert max-content legt dieses Verhalten fest.

<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;
}