box-sizing property
Specifies the box model to use for object sizing.
  |
Syntax
box-sizing: content-box | border-box
Property values
content-box-
Default. The specified width and height apply to the width and height respectively of the content box of the element. The padding and border of the element are drawn outside this area.
border-box-
The specified width and height determine the border box of the element. Any padding or border specified on the element is drawn inside the remaining area. The content box is computed by subtracting the padding or border widths of the respective sides from the specified width and height.
This is the default behavior of width and height in IE5 mode for replaced elements and input elements, such as buttons.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | content-box |
Standards information
- CSS3 Basic User Interface Module, Section 7.1
Remarks
This property requires Windows Internet Explorer to be in IE8 Standards mode rendering.
The illustration below demonstrates the content-box value and how the padding and border are drawn outside of the width of the content box.
The illustration below demonstrates the border-box value and how the padding and border are included in the content box.
As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-box-sizing" as an alias for this property.
Examples
The following example shows two div objects with different box-sizing settings.
<div id="contentBox">box-sizing: content-box;</div> <div id="borderBox">box-sizing: border-box;</div>
The first div object sets box-sizing to content-box. The added padding and border are drawn outside of the content box. In the second div object, box-sizing is set to border-box. The added padding and border are included in the calculation of the content box.
#contentBox {
width: 200px;
border: 5px solid #000080;
box-sizing: content-box;
padding: 15px;
}
#borderBox {
width: 200px;
border: 5px solid #000080;
box-sizing: border-box;
padding: 15px;
}
The following image shows the result. The second div object has a shorter width than the first div object:
See also