The box-sizing Property

The W3C box model specifies that the width and height of an object should refer only to the dimensions of an element’s content, ignoring any padding or border. But some web designers have expressed a desire to specify dimensions that refer to an entire element, including any padding and border.

To provide this feature, CSS3 lets you choose the box model you wish to use with the box-sizing property. For example, to use the total width and height of an object including padding and borders, you would use this declaration:

box-sizing:border-box;

Or, to have an object’s width and height refer only to its content, you would use this declaration (the default):

box-sizing:content-box;

Note

WebKit and Mozilla-based browsers (such as Safari and Firefox, respectively) require their own prefixes to this declaration (-webkit- and -moz-), as detailed at the website http://caniuse.com.