Intrinsische GröÃe
In CSS bezieht sich die intrinsische GröÃe eines Elements auf die GröÃe, die es basierend auf seinem Inhalt hätte, ohne die Auswirkungen des Layoutkontexts, in dem es erscheint, zu berücksichtigen. Dies ist das Gegenteil der extrinsischen GröÃe eines Elements, die durch externe Einschränkungen wie die ContainergröÃe bestimmt wird. Die intrinsischen GröÃen eines Elements werden durch seine min-content und max-content GröÃen dargestellt.
Inline-Elemente werden intrinsisch dimensioniert. CSS-Boxmodell-Eigenschaften wie height, width, block-size, inline-size, padding-block und margin-block haben keine Auswirkungen 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 schwebte (ohne andere CSS-Box-Eigenschaften). 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 dieselbe Bedeutung wie für Text â die GröÃe, bei 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 davon ausgegangen, 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 kann explizit in seinen EXIF-Daten angegeben werden. Die Pixeldichte von Bildern kann auch über das 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 ihre Berechnungsweise sind im Modul CSS Box Sizing 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 stellt das Element auf die GröÃe ein, die es hätte, wenn der Text in inline-Richtung so klein wie möglich umbrochen wäre, ohne einen Ãberlauf zu verursachen, und mit so viel weichem Umbruch wie möglich. Für eine Box, die eine Textzeichenfolge enthält, würde die minimale intrinsische GröÃe durch das längste Wort definiert.
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 überläuft. Der Schlüsselwortwert max-content setzt dieses Verhalten.
p {
width: max-content;
background-color: palegoldenrod;
}
Siehe auch
- Verwandte Glossarbegriffe:
- CSS
min-content,max-contentundfit-contentGröÃen-Schlüsselwörter interpolate-sizeaspect-ratiocalc-size()- CSS Box Sizing Modul
- CSS Box Sizing Module Level 3 Spezifikation