Description

Box-Sizing CSS3 has including a new attribute "box sizing". This allows us to choose whether the width set to an element will include borders and padding or whether borders and padding will add to the overall width increasing its size.

The default "box-sizing model" is "content-box" this is what we have traditionally used in previous CSS Models. "Box-Sizing Border-Box" is what is used by Internet Explorer in "Quirks Mode" (Non standard compliant mode).

Example: You have an element with a width of 200 and a border of 5 pixels and padding of 10 pixels.
"Box-Sizing: Content-Box" Will make the total width of the element 230 pixels leaving 200 pixels for content.

"Box-Sizing: Border-Box" will produce an element with the width of 200 pixels this leaves only 170 pixels for the actual content box itself.

Example

div{
width: 200px;
height:50px;
border: 1px #50A4AB solid;
padding: 10px;
margin:10px;
background:#CCC;
}
#one {
box-sizing: border-box;
}
#one {
box-sizing: content-box;
}

Values
Content-Box, Border-Box
Default value
Content-Box
Introduced in CSS version
3
Applies to elements
All
Inherited
No
Browser Support
BrowsersIEFirefoxSafariOperaChrome
Versions8-moz--webkit-7-webkit-
Belongs to:

See the full list CSS properties and browser support: CSS Properties