Pixelscheucher

Paul Irish stellt mal kurz box-sizing: border-box vor und stellt fest, dass man es auch benutzen kann, wenn das Projekt mindestens IE8 unterstützt, der Browser-Support scheint recht gut zu sein.

box-sizing: border-box macht im Grunde das, was der IE früher falsch gemacht hat: ein 200px breites Element bleibt im Gesamten 200px breit, auch wenn man padding, margin und Freunde hinzufügt. Normalerweise wirds ja dazu gerechnet, so dass eine Box dann 200px + margin + padding breit ist.

Lässt sich ja hoffentlich in den nächsten Projekten einsetzen, sollte aber vorher getestet werden. für IE7 und drunter gibts auch Polyfills, mehr dann aber im Artikel von Paul Irish.

(via  * { box-sizing: border-box } FTW « Paul Irish.)

Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model.

Anyway, I have a recommendation for your CSS going forward:

/* apply a natural box layout model to all elements */
* { box-sizing: border-box; -moz-box-sizing: border-box; }

This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%;) But applying this to all elements is safe and wise.