Zusammenfassung

Die box-sizing CSS-Eigenschaft wird verwendet, um das Standard CSS Boxmodell zu verändern. Das Boxmodell wird dazu verwendet, Breiten und Höhen von Elementen zu berechnen.

Man kann diese Eigenschaft dazu verwenden, das Verhalten bestimmter Browser nachzuahmen, die die CSS Boxmodell Spezifikation nicht erwartungsgemäß unterstützen.

Initialwertcontent-box
Anwendbar aufalle Elemente, die Breite oder Höhe akzeptieren
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* 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 Syntax

content-box | border-box

Beispiele

/* Unterstützt von Firefox, WebKit, Opera und IE8+ */

.example {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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 AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome 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
Keine 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 ? Edge Mobile Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
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 JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android ?
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 ? Edge Mobile 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
Kompatibilität unbekannt  
Kompatibilität unbekannt
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

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, Volker-E, Sebastianz, tronsha, fscholz, maxstrebel
Zuletzt aktualisiert von: SJW,