CSS3 Box-sizing

Nach W3C-Vorgaben CSS2 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.

Werte und Syntax für box-sizing

box-sizing: content-box;
Dies entspricht dem 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: border-box; und
box-sizing: padding-box;
Bei dieser Angabe werden border und padding in width und height eingerechnet.

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

Beispiele für box-sizing

Beispiel für border-box

alle Boxen haben einen Breitenangabe von width:400px;

#box1  {
border:10px solid #E1DDD9;
}

#box2 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

Beispiel für border-box und padding-box

alle Boxen haben einen Breitenangabe von width:400px;

#box3 {
border:10px solid #E1DDD9;
padding:30px;
}

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

Wichtig: Im Moment wird box-sizing: padding-box; nur dargestellt wenn auch box-sizing: border-box; notiert wird.