Mit »box-sizing: border-box;« das CSS Box Model verändern

Zuletzt aktualisiert am 29. April 2014 • 4 Kommentare • Themen: ,
box-model

Mit dem CSS Befehl box-sizing: border-box; lässt sich das Box Model von CSS manipulieren. Die sichtbare Breite eines Elements wird dann nicht mehr wie üblich durch die Summe von width, padding und border bestimmt, sondern schließt diese Angaben bereits mit ein. Das erleichtert die Erstellung flexibler Seitenelemente, insbesondere im RWD, deutlich.

Seminar: Responsive Web Design für Konzeptioner, Projektleiter und Designer

In diesem Seminar lernen Sie alle Aspekte von Responsive Design kennen, ohne dabei tiefer als notwendig in die technischen Details einzusteigen.

Berlin, 22. + 23. November 2016

Was stört am klassischen Box-Model?

Normalerweise addiert das Box Model von CSS die Angaben von padding und border zur Breite (width) des Elements hinzu. Auch die Größe von margin wird hinzugefügt; da margin jedoch keinen Einfluss auf die sichtbare Breite des Elements hat, lasse ich diesen Punkt in diesem Zusammenhang mal außer acht.

Klassisches Box Model von CSS: Der Platzbedarf des Elements, bestimmt sich aus der Summe von width/height, padding, border und margin
Klassisches Box Model von CSS: Der Platzbedarf des Elements, bestimmt sich aus der Summe von width/height, padding, border und margin

Ein Container mit einer Breite von 100 Pixeln, einem padding von 20 Pixeln und einer Umrahmung von 1 Pixel nimmt also tatsächlich 142 Pixel in Anspruch. 1px border-left + 20px padding-left + width + 20px padding-right + 1px border-right = 142 Pixel Gesamtbreite.

In der Praxis ist dieses Verhalten sehr unpraktisch. Insbesondere wenn Prozentwerte für die Breite des Elements in Kombination mit pixelbasierten padding- oder border-Angaben verwendet werden kann es schnell zu Rundungsproblemen kommen.

Funktionsweise von box-sizing: border-box;

Mit der CSS-Eigenschaft box-sizing: border-box; kann das Box Model verändert werden. Die Breite des Elements wird dann anhand der „Border Box“ berechnet. Wird einem Element eine Breite (width) von 200 Pixeln zugewiesen, so nimmt das Element dank box-sizing auch 200 Pixel in Anspruch. padding und border werden nach innen berechnet.

Wenn box-sizing: border-box; verwendet wird, berechnet der Browser die Breite des Elements anhand der Border Box
Wenn box-sizing: border-box; verwendet wird, berechnet der Browser die Breite des Elements anhand der Border Box

Browser-Support und Polyfills

Der Browser-Support für box-sizing: border-box; sieht sehr gut aus. Alle modernen Browser unterstützen die Eigenschaft. Mozilla und Webkit brauchen allerdings noch einen Vendor-Prefix. Dennoch kann das Box-Modell bei modernen Websites für alle Elemente global verändert werden.


*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

In den Internet Explorern 6 und 7 funktioniert die Eigenschaft nicht. Zu diesem Zweck gibt es allerdings ein Polyfill was Abhilfe schafft und sehr einfach einzusetzen ist.
Zunächst muss eine .htc-Datei heruntergeladen werden. Im zweiten Schritt reicht der Befehl *behavior: url(/scripts/boxsizing.htc); aus, um die Datei anzusprechen. Das war auch schon alles. 


-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(/scripts/boxsizing.htc);

Links / Quellen