boxSizing property
Specifies the box model to use for object sizing.
![]() ![]() |
Syntax
HRESULT value = object.put_boxSizing( v);HRESULT value = object.get_boxSizing(* p);
Property values
Type: BSTR
-
Default. The specified IHTMLCSSStyleDeclaration::width and IHTMLCSSStyleDeclaration::height apply to the width and height respectively of the content box of the element. The IHTMLCSSStyleDeclaration::padding and IHTMLCSSStyleDeclaration::border of the element are drawn outside this area.
-
The specified IHTMLCSSStyleDeclaration::width and IHTMLCSSStyleDeclaration::height determine the border box of the element. Any IHTMLCSSStyleDeclaration::padding or IHTMLCSSStyleDeclaration::border specified on the element is drawn inside the remaining area. The content box is computed by subtracting the IHTMLCSSStyleDeclaration::padding or IHTMLCSSStyleDeclaration::border widths of the respective sides from the specified width and height.
This is the default behavior of IHTMLCSSStyleDeclaration::width and IHTMLCSSStyleDeclaration::height in IE5 mode for replaced elements and input elements, such as buttons.
String format
content-box | border-box
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 IHTMLCSSStyleDeclaration::padding and IHTMLCSSStyleDeclaration::border are drawn outside of the width of the content box.

The illustration below demonstrates the border-box value and how the IHTMLCSSStyleDeclaration::padding and IHTMLCSSStyleDeclaration::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 IHTMLCSSStyleDeclaration::boxSizing settings.
<div id="contentBox">box-sizing: content-box;</div> <div id="borderBox">box-sizing: border-box;</div>
The first div object sets IHTMLCSSStyleDeclaration::boxSizing to content-box. The added padding and border are drawn outside of the content box. In the second div object, IHTMLCSSStyleDeclaration::boxSizing 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:

Requirements
|
Minimum supported client |
Windows XP with SP2 |
|---|---|
|
Minimum supported server |
Windows Server 2003 |
|
Header |
|
|
IDL |
|
|
DLL |
|

