Intrinsische Größe

In CSS bezeichnet die intrinsische Größe eines Elements die Größe, die es basierend ausschließlich auf seinem Inhalt hätte, ohne die Auswirkungen des Layout-Kontexts zu berücksichtigen, in dem es erscheint. Dies ist das Gegenteil der extrinsischen Größe eines Elements, die durch externe Einschränkungen wie die Größe des Containers bestimmt wird. Die intrinsischen Größen eines Elements werden durch seine min-content- und max-content-Größen repräsentiert.

Inline-Elemente haben intrinsische Größen. CSS-Box-Modell-Eigenschaften wie height, width, block-size, inline-size, padding-block und margin-block haben keinen Einfluss auf ihr Layout (obwohl margin-inline und padding-inline den Abstand innerhalb einer Zeile beeinflussen).

Zum Beispiel ist die minimale intrinsische Größe des Inline-<span>-Elements die kleinste Größe, die es hätte, wenn es in einem Container mit inline-size: 0 floated wäre (ohne dass andere CSS-Box-Eigenschaften angewendet werden). Die maximale intrinsische Größe ist das Gegenteil; es ist die Größe, die das gleiche <span> hätte, wenn es in einem Container mit unendlicher inline-size platziert würde.

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ä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 können 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" den EXIF-Wert angewendet wird.

Intrinsische Größen und deren Berechnung sind im CSS Box Sizing-Modul definiert.

Minimale intrinsische Größe

Um ein Element entsprechend seiner minimalen intrinsischen Größe einzustellen, 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ürde, ohne dass es zu einem Überlauf kommt, mit möglichst viel weichem Umbruch. Für eine Box, die eine Zeichenkette 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>

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. Textinhalte würden so breit wie möglich angezeigt, ohne weichen Umbruch, selbst wenn er seinen Container überfließt. 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>

css

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

Siehe auch

Verwandte Glossarbegriffe:
- Extrinsische Größe
CSS min-content, max-content, und fit-content Größen-Schlüsselwörter
interpolate-size
aspect-ratio
calc-size()
CSS Box Sizing-Modul
CSS Box Sizing Module Level 3 Spezifikation

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden