Was ist die CSS-Eigenschaft width?
Die CSS-Eigenschaft width legt die bevorzugte horizontale Größe eines Elements fest, meist für dessen Inhaltsbox. Box-Sizing, intrinsische Abmessungen, Layoutmodus und Beschränkungen durch min-width oder max-width können die verwendete Größe verändern.
So funktioniert die CSS-Eigenschaft width
width liefert dem Layoutalgorithmus eine bevorzugte Größe, statt das endgültige Maß der Rahmenbox zu garantieren. Der Prozent- oder Längenwert wird bei content-box auf die Inhaltsbox und bei border-box auf die Rahmenbox angewendet. Intrinsische Schlüsselwörter und automatische Größenbestimmung folgen layoutspezifischen Regeln. Mindest- und Höchstgrenzen können den gewählten Wert überschreiben, und die Größenabstimmung in Flex- oder Grid-Layouts kann Platz neu verteilen. Die Eigenschaft dient zur Größenbestimmung von Medienflächen und Bedienelementen. Ersetzte Elemente bringen jedoch auch intrinsische Abmessungen und Seitenverhältnisse mit.
Wichtige Fakten
- Bei box-sizing: content-box schließt die angegebene Breite Innenabstände und Rahmen aus. Bei border-box sind diese Bestandteile in der angegebenen Breite enthalten.
- Beim Anfangswert min-width: auto können ein Flex-Element in einem Container mit horizontaler Hauptachse sowie manche Grid-Elemente, etwa eines, das horizontal genau eine 1fr-Spur belegt, eine Verkleinerung unter ihr inhaltsbasiertes Minimum verweigern, sofern ihr berechneter Wert für overflow nicht hidden, scroll oder auto ist. min-width: 0 hebt diese automatische Untergrenze auf.
- Bei einem Bild oder Video mit intrinsischen Proportionen kann die Angabe einer Abmessung erlauben, die andere automatisch zu bestimmen. Werden beide Abmessungen erzwungen, kann dies den gerenderten Inhalt verzerren.
Wann die CSS-Eigenschaft width relevant ist
Legen Sie width für responsive Bilder, Videoplayer, Panels und Bedienelemente fest und berücksichtigen Sie dabei das umschließende Layout. Eine prozentuale Breite kann überlaufen, wenn bei content-box Innenabstände und Rahmen hinzukommen.