box-sizing property

Specifies the box model to use for object sizing.

CSS3 Basic User Interface Module, Section 7.1Internet Explorer 8

 

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 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 padding and 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 padding and border are included in the content box.

An illustration showing the box-sizing 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:

An illustration of the box-sizing property

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style

 

 

Show:
© 2014 Microsoft