CSS3 Box-sizing

Nach W3C CSS2-Vorgaben gibt die Eigenschaft width einer Box dessen Innenbreite an. Innenabstand padding, Rand border und Aussenabstand margin werden zur Breite hinzugerechnet. Das Gleiche gilt für die Höhe height.

Mit CSS3 box-sizing kann bestimmt werden, dass der Innenabstand padding und der Rand border in width und height eingerechnet wird.

Syntax und Werte für box-sizing

box-sizing: content-box;
Dies entspricht dem Default-Verhalten von width und height oder min-width und min-height wie es in den CSS2.1. Spzifikationen des W3C definiert ist: border und padding werden zur width hinzugerechnet.

box-sizing: padding-box;
Das padding wird innerhalb der width und height eingerechnet (~ "box" bis und mit padding).
Beachte!
padding-box, das nur Firefox unterstützt, wird vom MDN explizit als "experimental" bezeichnet. Das W3 fügt hinzu: "The ‘padding-box’ value is at risk"!

box-sizing: border-box;
padding und border werden innerhalb der width und height eingerechnet (~ "box" bis und mit border).
Eine Box mit 400px width, 30px padding und 10px border hat mit dieser Angabe eine Breite von 400px! Das ist das Box Model, das der Internet Explorer im Quirks mode verwendet.

box-sizing: inherit;
Spezifiziert, dass der Wert von box-sizing vom Elternelement geerbt wird.

Beispiele für box-sizing

#box0 {
width: 400px;
border: 0;
padding: 0;
}

» Alle nachfolgenden Boxen haben:
width:400px; border:10px; padding:30px;

#box1  {
width: 400px;
border: 10px solid #E1DDD9;
padding: 30px;
}

Mit border-box

#box2 {
width: 400px;
border: 10px solid #E1DDD9;
padding: 30px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

Mit padding-box – experimental!

Wird nur von Firefox unterstützt (vgl. Ausgabe mit Firefox / Chrome!)

#box3 {
width: 400px;
border: 10px solid #E1DDD9;
padding: 30px;
-webkit-box-sizing: padding-box;
   -moz-box-sizing: padding-box;
        box-sizing: padding-box;
}

Screenshot
padding-box/border-box mit Firefox vs Chrome: Screenshot zeigen.