CSS3 introduces a very useful property called box-sizing. The box-sizing property is used to alter the default CSS box model. The box model is used to calculate the widths and heights of elements.
For browsers that adhere to the CSS box model, the width and height of an element are calculated by adding the width/height + padding + border.
So for example, if an element has its width property set to 500px, left and right padding of 10px and left and right border of 15px, then the actual rendered width of this element is 500 + 10 + 10 + 15 + 15 = 550px.
Browser Support
The box-sizing property is supported in Chrome, Internet Explorer, and Opera. Firefox supports the alternative vendor prefix property, the -moz-box-sizing property, and Safari supports the -webkit-box-sizing property.
Syntax
The box-sizing property allows you to modify the calculated width and height of an element.
box-sizing: content-box|border-box|padding-box*|inherit;
Usage
The box-sizing property can be used in various situations. For example, if you need to place two boxes that include borders, side by side, it can be easily achieved by setting the box-sizing property value to border-box.
This will force the browser to render the box with the specified width and height, and place the border and padding inside the box.
So, in the following example, if your browser supports the box-sizing property, the two div elements will appear side by side rather than one div on top of the other.
Example
In this example, the two div elements will appear side by side since their padding and border widths are calculated within the border-box of the elements.