Intrinsische Größe

In CSS ist die intrinsische Größe eines Elements die Größe, die es allein auf Basis seines Inhalts 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ößenanpassungs- 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), 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, mit 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 diesem Fall ist die intrinsische Größe einfach die Pixelhöhe und -breite. Eine explizite Angabe der intrinsischen Größe und Auflösung eines Bildes kann in seinen EXIF-Daten erfolgen. Die Pixeldichte eines Bildes kann auch über das srcset Attribut eingestellt werden. Beachten Sie, dass, wenn beide Mechanismen verwendet werden, der srcset Wert "über" den EXIF-Wert angewendet wird.

Intrinsische Größen und wie sie berechnet werden, sind im CSS Sizing Modul 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. Dadurch wird das Element auf die Größe gesetzt, die es hätte, wenn der Text so klein wie möglich in der Inline-Richtung umgebrochen wäre, ohne Überlauf zu verursachen, mit so viel weichem Umbruch wie möglich. Für eine Box, die eine Zeichenkette Text 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>

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 seine Box überlaufen 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;
}