CSS3 box-sizingProperty
Example
The total height and width of an element include padding and border (padding and border):
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version that supports the property.
The number preceding -webkit-, -ms-, or -moz- is the first browser version that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Property definition and usage instructions
The box-sizing property defines how to calculate an element's total width and total height, mainly setting whether padding and border need to be included.
For example, if you need to place two bordered boxes side by side, you can set box-sizing to "border-box". This allows the browser to render boxes with the specified width and height, and includes the border and padding inside the boxes.
By default, the width and height of an element are calculated as follows:
width(宽度) + padding(内边距) + border(边框) = 元素实际宽度 height(高度) + padding(内边距) + border(边框) = 元素实际高度
| Default Value: | content-box |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object.style.boxSizing="border-box" |
Syntax
| Value | Description |
|---|---|
| content-box | Default value. If you set an element's width to 100px, then the element's content area will be 100px wide, and any border and padding widths will be added to the final rendered width of the element. |
| border-box | Tells the browser: the border and padding values you set are included within the width. That is, if you set an element's width to 100px, then these 100px will include its border and padding, and the actual width of the content area is width minus (border + padding). In most cases, this makes it easier for us to set an element's width and height. Note:border-box does not include margin. |
| inherit | Specifies that the value of the box-sizing property should be inherited from the parent element. |
More Examples
Example
Set two borders side by side:
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Try it Yourself »
Related Articles
CSS3 Tutorial:CSS3 User Interface
other extensions