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

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:
© 2014 Microsoft