CSS3 box-sizing Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The box-sizing CSS property is used to alter the default CSS box model, which is normally used by the browser to calculate the widths and heights of the elements.
The following table summarizes the usages context and the version history of this property.
| Default value: | content-box |
|---|---|
| Applies to: | All elements that accept width or height |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the box-sizing property in action.
Example
Try this code ».box {
width: 50%;
padding: 15px;
float: left;
border: 5px solid #000;
box-sizing: border-box;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
content-box |
The specified width and height properties include only the content of the element. It does not include the padding, border or margin. |
padding-box |
The specified width and height properties include the padding size, and do not include the border or margin. |
border-box |
The specified width and height properties include the padding and border, but not the margin. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element box-sizing property. |
Browser Compatibility
The box-sizing property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Box Model, CSS Dimension.
