Mario Fink • Webentwickler

Layouts ohne Kopfschmerzen – box-sizing: border-box

18. März 2014

Ich weiß nicht genau woran es lag, dass ich die CSS3-Eigenschaft box-sizing so lange ignoriert hatte. Vermutlich daran, dass sie der Internet Explorer 7 nicht unterstützt und keine akzeptablen Polyfills existieren. Wie dem auch sei, der IE7 ist nun endlich Geschichte — höchste Zeit, sich diese CSS-Eigenschaft etwas näher anzuschauen.

Kurz gesagt: Mit box-sizing: border-box ist endlich ein leicht verständliches CSS-Box-Model verfßgbar, bei dem nicht permanent auf unsemantische Hilfscontainer zurßckgegriffen werden muss.

Klassisches Beispiel: Ein Layout mit einem Hauptbereich und einer Seitenleiste. Man benutzt zwei Divs – das eine bekommt eine Breite von 75%, das andere 25%.

Soweit so gut.

Nun klebt aber der Inhalt direkt am Rand der beiden Bereiche. Also fügt man jeweils einen Innenabstand hinzu – sagen wir padding: 1em. Und da sich im klassischen CSS-Box-Model die Breite eines Elements errechnet aus

Breite des Inhalts + Innen- und Außenabstand + Rand

zerfällt das eigentlich klar definierte Layout in seine Einzelteile.

Beispiel ohne box-sizing

See the Pen Box-sizing demo (without box-sizing) by Mario Fink (@mariofink) on CodePen.

Um dieses Problem im klassischen Box-Model zu beheben, muss der Inhalt jedes Bereiches in einen Hilfscontainer gepackt werden (auch als Gutter bekannt). Wer sein HTML gerne halbwegs semantisch liebt, wird hier die Nase rĂźmpfen.

box-sizing: border-box zur Hilfe!

Um das eigentlich erwartete Ergebnis zu erlangen, genügt es im obigen Beispiel für die beiden Inhaltscontainer box-sizing auf border-box zu setzen. Nun beziehen sich sowohl Breiten- als auch Höhenangaben auf das komplette Element – nicht nur auf den Inhaltsbereich.

Gerade bei komplexeren Layouts erspart das den ein oder anderen Knoten im Gehirn.

Beispiel mit box-sizing: border-box

See the Pen Box-sizing demo (border-box) by Mario Fink (@mariofink) on CodePen.

border-box all the things!

Fßr zukßnftige Projekt sollte man sich an die Empfehlung von Paul Irish halten und sämtlichen HTML Elementen border-box verpassen:

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

Hilft besser als jede Kopfschmerztablette – versprochen!

Links

* { Box-sizing: Border-box } FTW von Paul Irish Can I use: CSS3 box-sizing Kompatibilitätstabelle