box-sizing

Die box-sizing CSS Eigenschaft legt fest, wie die Gesamtbreite und -höhe eines Elements berechnet wird.

Im CSS box model wird die Breite width und die Höhe height, die Sie einem Element zuweisen, standardmäßig nur auf die Inhaltsbox des Elements angewendet. Wenn das Element über einen Rahmen border oder Innenabstände padding verfügt, wird diese zu der Breite width und Höhe height hinzugefügt, um die Größe der Box zu erreichen, die auf dem Bildschirm angezeigt wird. Das bedeutet, dass Sie bei der Einstellung von Breite width und Höhe height den Wert anpassen müssen, um einen eventuell hinzugefügten Rahmen oder Auffüllen zu berücksichtigen. Wenn Sie z.B. vier Boxen mit einer Breite width: 25%; haben, wenn eine davon einen linken oder rechten Rand oder einen linken oder rechten Rand hat, passen sie standardmäßig nicht auf eine Zeile innerhalb der Beschränkungen des Elterncontainers.

Die box-sizing Eigenschaft kann verwendet werden, um dieses Verhalten anzupassen:

  • content-box gibt Ihnen das standardmäßige CSS-Box-Größenverhalten. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, dann wird die Inhaltsbox des Elements 100 Pixel breit sein, und die Breite von Rahmen oder Auffüllungen wird zur endgültigen gerenderten Breite hinzugefügt, wodurch das Element breiter als 100px wird.
  • border-box

    weist den Browser an, bei den Werten, die Sie für die Breite und Höhe eines Elements angeben, alle Ränder und Auffüllungen zu berücksichtigen. Wenn Sie die Breite eines Elements auf 100 Pixel festlegen, werden diese 100 Pixel alle von Ihnen hinzugefügten Ränder oder Füllungen enthalten, und das Inhaltsfeld wird verkleinert, um diese zusätzliche Breite zu absorbieren. Dadurch wird die Größenanpassung von Elementen normalerweise viel einfacher.

Hinweis: Es ist oft nützlich, bei Layoutelementen die box-sizing auf border-box zu setzen. Dies erleichtert den Umgang mit der Größe von Elementen erheblich und eliminiert im Allgemeinen eine Reihe von Fallstricken, auf die Sie beim Layouten Ihres Inhalts stoßen können.  Bei der Verwendung von position: relative oder position: absolute und der Nutzung von box-sizing: content-box können die Positionswerte relativ zum Inhalt und unabhängig von Änderungen der Rahmen- und Füllungsgrößen eingestellt werden, was manchmal wünschenswert ist.

Syntax

Das box-sizing Eigenschaft wird als ein einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.

/* Schlüsselwortwerte */
box-sizing: content-box;
box-sizing: border-box;

/* Globale Werte */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

Werte

content-box
Dies ist der Standard-Stil, der vom CSS Standard definiert wurde. Die Werte width und height berechnen sich nur aus dem Inhalt des Elementes und enthalten weder border, margin oder padding.
border-box
Die Werte width und height enthalten padding und border, aber nicht margin. Das ist das Boxmodell, das der Internet Explorer im Quirks mode verwendet.

Formale Definition

Initialwertcontent-box
Anwendbar aufalle Elemente, die Breite oder Höhe akzeptieren
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formal syntax

content-box | border-box

Beispiele

Box sizes mit content-box und border-box

Dieses Beispiel zeigt, wie unterschiedliche box-sizing Werte die gerenderte Größe von zwei ansonsten identischen Elementen verändern.

HTML

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box { 
  box-sizing: content-box; 
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box { 
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Result

Spezifikationen

Spezifikation Status Kommentar
CSS Basic User Interface Module Level 3
Die Definition von 'box-sizing' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompabilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
box-sizingChrome Vollständige Unterstützung 10
Hinweise
Vollständige Unterstützung 10
Hinweise
Hinweise box-sizing is not respected when the height is calculated from window.getComputedStyle().
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 29
Vollständige Unterstützung 29
Vollständige Unterstützung 1
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Hinweise Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Vollständige Unterstützung 8
Hinweise
Vollständige Unterstützung 8
Hinweise
Hinweise box-sizing is not respected when the height is calculated from window.getComputedStyle().
Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 5.1
Vollständige Unterstützung 5.1
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise box-sizing is not respected when the height is calculated from window.getComputedStyle().
Vollständige Unterstützung 2
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 18
Hinweise
Vollständige Unterstützung 18
Hinweise
Hinweise box-sizing is not respected when the height is calculated from window.getComputedStyle().
Vollständige Unterstützung 18
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 29
Vollständige Unterstützung 29
Vollständige Unterstützung 4
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Hinweise Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 14
Hinweise
Vollständige Unterstützung 14
Hinweise
Hinweise box-sizing is not respected when the height is calculated from window.getComputedStyle().
Vollständige Unterstützung 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari iOS Vollständige Unterstützung 6
Vollständige Unterstützung 6
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung 1.0
Hinweise
Vollständige Unterstützung 1.0
Hinweise
Hinweise box-sizing is not respected when the height is calculated from window.getComputedStyle().
Vollständige Unterstützung 1.0
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
padding-box
VeraltetNicht standardisiert
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung 1 — 50IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung 4 — 50Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch