Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

box-sizing

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 box model Spezifikation nicht erwartungsgemäß unterstützen.

Initialwertcontent-box
Anwendbar aufalle Elemente, die Breite oder Höhe akzeptieren
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
AnimierbarNein
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.
Anwärter Empfehlung Ursprüngliche Definition

Browser Kompabilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung 1.0 -webkit [1]
10.0
1.0 (1.7 oder früher)-moz[1]
29.0 (29.0)

8.0 [1]

7.0 3.0 (522)-webkit
5.1 (534.12)
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung 2.1-webkit [1]
4.0
1.0 (1.0)-moz [1]
29.0 (29.0)
Mango 7.5 (Ja) (Ja)

[1] box-sizing wird ignoriert wenn height anhand von window.getComputedStyle berechnet wird. Das trifft mindestens für Firefox 18 (Bug 520992) und Internet Explorer 9, aber nicht für Chrome 24 zu (andere Browser und Eigenschaften sind ungestestet). Anzumerken ist, dass IE9's proprietäre currentStyle Eigenschaft den richtigen Wert für height ausgibt.

[2] Das Herstellerpräfix -webkit wurde in 534.12 entfernt.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, tronsha, fscholz, maxstrebel
 Zuletzt aktualisiert von: Sebastianz,