CSS3: Das etwas andere Box-Modell mit {box-sizing:border-box}

Das klassische Box-Modell war noch nie besonders intuitiv. In CSS3 wurde mit {box-sizing:border-box} eine Alternative vorgestellt, die besonders bei flexiblen Layouts fast nur Vorteile hat.

Anzeige

Das klassische Box-Modell {box-sizing: content-box}

Wenn Sie im analogen Alltag die Breite einer Kiste angeben, dann ist damit immer die Entfernung von einem Außenrand zum anderen gemeint, inklusive Innenabstand (padding) und Rand der Kiste (border).

Beim klassischen Box-Modell ist das anders. Dort definiert width nur die Breite des Inhaltsbereichs und Angaben für padding oder border werden hinzugefügt. Visuell sieht dieses klassische Box-Modell so aus (nur zur Erinnerung):

Man muss manchmal ein bisschen rechnen oder tricksen bis alles passt. Bei Layouts mit festen Pixelbreiten ist das zwar manchmal etwas nervig, aber durchaus machbar.

Anzeige

Doppelte HTML-Elemente als Notlösung

Wirklich problematisch wird das klassische Box-Modell erst, wenn innerhalb einer Box die Angaben für width, padding, border oder margin verschiedene Einheiten verwendet werden, denn dann lässt sich die Gesamtbreite dieses Elements nicht mehr zuverlässig bestimmen:

• Eine mit <aside class="sidebar"> erstellte Layoutspalte soll eine Breite von 20% und ein padding links und rechts von jeweils 10px bekommen.
• Frage: Wie viel Platz muss man für die Sidebar im Layout reservieren?
• Antwort: Keine Ahnung. Das kann man nicht zuverlässig berechnen.

Damit flexible Layouts aber nicht zur reinen Lotterie verkommen, hat man sich beholfen, indem man das HTML-Element verdoppelt und die Box-Modell-Eigenschaften auf die beiden Elemente verteilt:

• Innerhalb von aside wird ein zusätzliches div eingefügt.
• aside bekommt width:20% zugewiesen.
• Das innere div bekommt eventuelle Angaben für padding, border oder auch margin.

Dadurch hat die Sidebar unabhängig vom padding & Co immer eine Breite von 20% und wird im wahrsten Sinne des Wortes berechenbar.

Diese Dopplung von HTML-Elementen ist heute so selbstverständlich, dass wir fast vergessen haben, dass es ursprünglich mal eine Notlösung war.

Boxen wie im richtigen Leben mit CSS3: {box-sizing: border-box}

Fast unbemerkt von der breiten Öffentlichkeit haben die Browser so nach und nach ein zweites Box-Modell eingebaut, das etwas anders funktioniert. In diesem Modell sind padding und border in der Angabe von width bereits enthalten. Es heißt border-box, weil die Breite der Box von border bis border gemessen wird. Grafisch dargestellt sieht das so aus:

Im Webdesigner-Alltag ist diese unscheinbare Änderung beim Layouten sehr praktisch. Bei der weiter oben beschriebenen Sidebar spart man damit zum Beispiel das doppelte, innere HTML-Element:

• Zunächst wird .sidebar { box-sizing:border-box} definiert.
• Dann wird dem Element z. B. width:20% und ein beliebiges padding oder border zugewiesen.

Fertig.

Mit der border-box ist es völlig egal, wie viel padding oder border ein Element bekommt, denn diese Werte werden von der Breite abgezogen und nicht hinzugefügt. Was in den meisten Fällen einfach nur praktisch ist. Die Sidebar wird auch ohne Dopplung der HTML-Elemente berechenbar.

Ein mit margin definierter Außenabstand kommt übrigens immer noch hinzu, aber dass ist bei den Boxen im richtigen Leben auch so.

Die border-box im Alltag

Wenn man erst einmal so richtig begriffen hat, wie praktisch diese border-box sein kann, kommt natürlich unweigerlich die Frage nach der Browserunterstützung auf. Und hier ist die Antwort:

Hey hey, sogar IE8 versteht das. Unbelievable. Mozilla benötigt zwar noch einen Prefix, aber wer den IE7 erst einmal draußen vor lassen kann, könnte sein Stylesheet mit folgendem Style beginnen:

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Und genau das empfiehlt Paul Irish in seinem Blog-Artikel vom 1. Februar 2012.

Fazit

Die border-box ist eine mehr als willkommene Alternative zum klassischen Box-Modell, aber bevor Sie komplett auf die border-box umsteigen, sollten Sie die weiter unten gelisteten Artikel studieren. Als Basis für flexible Layouts wird die border-box wahrscheinlich schon ziemlich bald selbstverständlich sein.

Lesenswerte Links zum Artikel

Hier einige lesenswerte Artikel, die gleichzeitig auch ein bisschen den Werdegang von vorsichtigen Versuchen bis zur Empfehlung widerspiegeln:

• Paul Irish, * {border-box} FTW (Februar 2012)
• Roger Johannsson, Controlling width with CSS3 box-sizing (April 2011)
• Chris Coyier, Box-Sizing (September 2010)
• Dirk Jesse, CSS – Alles wird gut? (Dezember 2006)

Und hier noch zwei Referenzen:

* W3C, CSS3-ui box-sizing
* Mozilla Developer Network, box-sizing

Bildquelle Holzbox: 16 Miles of String via photopin cc