Dylan Schiemann

A mostly unknown CSS 3 property called box-sizing allows developers to set the definition of width and height to the W3C CSS box model or the box model implemented in Internet Explorer 4 and 5. The CSS model includes the width of the content… padding, borders and margin are excluded. The IE box model includes the padding and the border. This causes a lot of problems for web developers who want elements to fit within a certain space. Defining a box to fit within a space using the IE model causes the box to be too wide in a CSS-complaint browser, and defining one to fit in a CSS-compliant browser is too narrow in many versions of Internet Explorer. CSS3 lets you set box-sizing to be content-box (default) or border-box (IE behavior). mozilla has already implemented this using the -moz prefix for test implementations, -moz-box-sizing. mozilla and other vendors are encouraged to use a prefix to a name when implementing a feature that has not reached official W3C recommendation status. This is a good thing as it doesn’t require workarounds ( such as Tantek Celik’s Box Model Hack ) in the future if the standard is incompatible with a vendor implementation.

Update: David Schontzler uses JavaScript to make Internet Explorer’s margins consistent with the W3C box model. An interesting approach to fixing the related margin:auto bug.