Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

boxSizing property

Specifies the box model to use for object sizing.

CSS3 Basic User Interface Module, Section 7.1Internet Explorer 8

 

Syntax

HRESULT value = object.put_boxSizing( v);HRESULT value = object.get_boxSizing(* p);

Property values

Type: BSTR

content-box (content-box)

Default. The specified IHTMLCurrentStyle::width and IHTMLRuleStyle::height apply to the width and height respectively of the content box of the element. The IHTMLRuleStyle::padding and IHTMLRuleStyle::border of the element are drawn outside this area.

border-box (border-box)

The specified IHTMLCurrentStyle::width and IHTMLRuleStyle::height determine the border box of the element. Any IHTMLRuleStyle::padding or IHTMLRuleStyle::border specified on the element is drawn inside the remaining area. The content box is computed by subtracting the IHTMLRuleStyle::padding or IHTMLRuleStyle::border widths of the respective sides from the specified width and height.

This is the default behavior of IHTMLCurrentStyle::width and IHTMLRuleStyle::height in IE5 mode for replaced elements and input elements, such as buttons.

String format

content-box | border-box

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Valuecontent-box

Standards information

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 IHTMLRuleStyle::padding and IHTMLRuleStyle::border are drawn outside of the width of the content box.

An illustration showing the box-sizing property

The illustration below demonstrates the border-box value and how the IHTMLRuleStyle::padding and IHTMLRuleStyle::border are included in the content box.

An illustration showing the box-sizing property

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 IHTMLCurrentStyle5::boxSizing settings.


<div id="contentBox">box-sizing: content-box;</div>
<div id="borderBox">box-sizing: border-box;</div>


The first div object sets IHTMLCurrentStyle5::boxSizing to content-box. The added padding and border are drawn outside of the content box. In the second div object, IHTMLCurrentStyle5::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:

An illustration of the box-sizing property

Requirements

Minimum supported client

Windows XP with SP2 [desktop apps only]

Minimum supported server

Windows Server 2003 [desktop apps only]

Header

Mshtml.h

IDL

Mshtml.idl

DLL

Mshtml.dll

 

 

Community Additions

ADD
Show:
© 2015 Microsoft