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 Kontexts zu berücksichtigen, in dem es erscheint. Zum Beispiel die durch CSS Box-Modell Eigenschaften angewendete Größen. 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, und padding-block und margin-block haben keinen Einfluss auf sie (obwohl margin-inline und padding-inline das 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 angewendet), innerhalb eines Containers mit einer Inline-Größe von 0px. Die maximale intrinsische Größe ist das Gegenteil. Es ist die Größe, die dasselbe <span> hätte, wenn die Inline-Größe seines Containers unendlich wäre.

Intrinsische Größe hat die gleiche Bedeutung für Bilder 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 die Pixelhöhe und -breite ist. Die intrinsische Größe und Auflösung eines Bildes können explizit in seinen EXIF Daten angegeben werden. Die Pixeldichte eines Bildes 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 wie sie berechnet werden, sind im CSS-Größenmodul definiert.

minimale intrinsische Größe

Um ein Element gemäß 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 so klein wie möglich in der Inline-Richtung umgebrochen würde, ohne einen Überlauf zu verursachen, mit so viel weichem Umbruch wie möglich. Für eine Box, die eine Zeichenkette mit Text enthält, würde die minimale intrinsische Größe durch das längste Wort definiert werden.

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 überfluten würde. Der Schlüsselwortwert max-content setzt dieses Verhalten.

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

Extrinsische Größenbestimmung

Das Gegenteil der intrinsischen Größe ist extrinsische Größe, die auf dem Kontext eines Elements basiert, ohne Rücksicht auf seinen Inhalt. Die extrinsische Größenbestimmung wird durch die Werte der Box-Modell-Eigenschaften bestimmt. Bei der extrinsischen Größenbestimmung geben Prozentsätze die Größe einer Box im Verhältnis zum umschließenden Block der Box an.

Siehe auch