CSS Reference Manual

CSS @rules

Complete list of CSS attributes

CSS caption-side Attribute CSS3 box-shadow Attribute

CSS3 box-Usage and examples of the sizing property

box-The sizing CSS property is used to change the defaultCSS Box Model, browsers usually use this model to calculate the width and height of elements.

The following table provides usage instructions and version history of this attribute, as well as its usage syntax in JavaScript scripts.

Default Value:	content-box
Applicable To:	All elements that accept width or height
Inheritance:	None
Animatable:	No View animation properties.
Version:	CSS3new feature
JavaScript Syntax:	object.style.boxSizing="border-box"

box-sizing usage syntax

The syntax of this attribute is as follows:

box-sizing: content-box | padding-box | border-box | initial | inherit

The following example demonstrates how to use box-sizing attribute.

Example

.box {
　　　　width:　50%;
　　　　padding:　15px;
　　　　float: left;
　　　　border:　5px solid #000;
　　　　box-sizing: border-box;
}

Test and see‹/›

Attribute Value

The following table describes the value of this attribute.

Value	Description
content-box	The specified width and height properties only include the content of the element. It does not include padding, border, or margin.
padding-box	The specified width and height properties include padding size and do not include border or margin.
border-box	The specified width and height properties include padding and border, but not margin.
initial	Set this attribute to its default value.
inherit	If specified, the associated elements adopt the box of their parent element.-sizing attribute values.

Browser Compatibility

box-Browser compatibility of sizing attributes, the numbers in the following table represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

	Firefox 2+ ^-moz-,29+ Google Chrome 4+ ^-webkit-,10+ Internet Explorer 8+ Apple Safari 3.2+ ^-webkit-,5.1 + Opera 9.5+