Intrinsische Größe

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

Inline-Elemente werden intrinsisch dimensioniert: Sizing und Box-Eigenschaften wie 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> hätte, wenn die Inline-Größe seines Containers unendlich wäre.

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 das Rendering 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 diesem Fall ist die intrinsische Größe einfach die Pixelhöhe und -breite. Eine Bildgröße und Auflösung können explizit in ihren EXIF-Daten angegeben werden. Die Pixeldichte kann auch für Bilder 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 deren Berechnungen sind im CSS-Sizing-Modul definiert.

Minimale intrinsische Größe

Um ein Element gemäß seiner minimalen intrinsischen Größe festzulegen, setzen Sie die inline-size (oder width in horizontale 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 Inline-Richtung umbrochen würde, ohne einen Überlauf zu verursachen, mit so viel soft-wrapping wie möglich. Bei einem Kasten, der einen Textstring 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. Sie ist die Größe des Elements, wenn die Inline-Größe des Containers unendlich wäre. Der Textinhalt würde so breit wie möglich angezeigt werden, ohne soft-wrapping, selbst wenn er seinen Container überschreiten würde. Der Stichwortwert 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;
}