new

Never fully understood the box model? CSS3 offers a new property, called box-sizing which let’s you change the behavior of the browser in calculating the width of an element. By default, box-sizing is set to content-box. With that set, it calculates width and height as specified by CSS 2.1, adding the border-width and border-height and the padding to the size of the box. By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box.

Firefox has this feature prefixed with -moz-, resulting in -moz-box-sizing. Safari 3 / WebKit uses -webkit-box-sizing and Opera just accepts plain box-sizing.

The two divs below should appear side by side, each (including borders) 50% of the content width of their container. If instead they are stacked one on top of the other then your browser does not support box-sizing.

Tweet