Jeder, der sich mit Webdesign beschäftigt, hat sich sicher schon einmal darüber geärgert: ein Element vergrößert sich durch die Bestimmung eines Innenabstandes. Nehmen wir als Beispiel mal eine Box mit einer Größe von 100 x 100 Pixeln.

.box {
width: 100px;
height: 100px;
}

Bestimmen wir mittels padding nun einen Innenabstand von 20 Pixeln, so vergrößert sich unsere Box auf eine Größe von 140 x 140 Pixeln.

.box {
width: 100px;
height: 100px;
padding: 20px;
}

Das ist das sogenannte Box-Modell, welches ebenso Rahmen und Außenabstände zur Größe des eigentlichen Elements hinzufügt. So vergrößert beispielsweise auch ein Rahmen mit einer Breite von 20 Pixeln unsere Box auf eine Größe von 140 x 140 Pixel, mit dem Innenabstand auf insgesamt 180 x 180 Pixel.

.box {
width: 100px;
height: 100px;
padding: 20px;
border: 20px solid #000;
}

Etwas verwirrend, oder? Man definiert eine feste Elementgröße und doch ist die reale Größe eine ganz andere.

Was tun? Wir verkleinern die Box einfach auf einen Wert von 20 x 20 Pixeln:

.box {
width: 20px;
height: 20px;
padding: 20px;
border: 20px solid #000;
}

und bekommen so eine Box mit 100 x 100 Pixeln.

Stellen wir uns aber einmal vor, dass wir mit flexiblen Wertangaben arbeiten. So wollen wir einem Texteingabefeld eine Breite von 100% zuweisen. Damit der Text nicht direkt am Rand klebt, definieren wir noch einen Innenabstand und für die Optik noch einen Rahmen:

textarea {
width: 100%;
padding: 5px 10px;
border: 1px solid #000;
}

Resultat: das Textfeld ist größer als 100%.

Und hier kommt nun box-sizing ins Spiel.

Lasst uns mal einen genaueren Blick darauf werfen.

Syntax

.box {
box-sizing: padding-box;
}

Shorthand

Kürzer geht’s nicht.

Browserkompatibilität

.box {
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
}
  • Apple Safari 3+
  • Google Chrome 1+
  • Internet Explorer 8+
  • Mozilla Firefox 1+
  • Opera 8.5+

Beschreibung

Der Innenabstand wird durch box-sizing im Zusammenspiel mit padding-box nicht mehr zur Größe des Elements hinzuaddiert und die Box bleibt bei der festgelegten Größe.

So ist es dann auch simpel vier gleichgroße Boxen mit definiertem Innenabstand nebeneinander anzuordnen:

.box {
float: left;
width: 25%;
padding: 10px;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
}

Praktisch, oder? Beim bisherigen Box-Modell hätten wir dabei ein Problem.

Nun kann man box-sizing für jedes Element einzeln deklarieren, auf welches es angewendet werden soll. Wer aber das Design von vornherein so plant, dass Innenabstände bei Breite und Höhe nicht berückstichtigt werden sollen, kann eine Generaldeklaration für alle Elemente definieren:

* {
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
}

Damit wird das bisherige Box-Modell für alle Elemente mit Innenabständen außer Kraft gesetzt.

Neben padding-box gibt es noch weitere Parameter, die mit box-sizing genutzt werden können:

  • content-box: ist das normale Verhalten, also das bisherige Box-Modell,
  • border-box: wie bereits oben erwähnt, vergrößert ein Rahmen das Element nicht,
  • margin-box: die Außenabstände verkleinern das Element, so dass es insgesamt die angegebene Größe erhält