CSS box-sizing Property
Description
The box-sizing
property is used to alter the default CSS box model used to calculate widths and heights of elements.
According to the CSS specification, the width of the block is the sum of the width of the content, margin, padding, and border values. The situation is similar with the block height. The box-sizing property allows you to change this algorithm so that the width and height properties do not specify the dimensions of the content, but the dimensions of the block.
- Initial value
- content-box
- Applies to
- All elements that accept width or height
- Inherited
- No
- Computed value
- Specified value
- Animatable
- No
- JavaScript syntax
- object.style.boxSizing
Interactive Demo
Parent container
Child container
Syntax
box-sizing: content-box | padding-box | border-box | inherit
Values
- content-boxThis is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the border, margin, or padding.
- padding-boxThe width and height properties include the padding size, and do not include the border or margin.
- border-boxThe width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode
Example
<div class="test">content-box</div>
<div class="test2">border-box</div>
div {
display: inline-block;
width: 150px;
height: 150px;
margin: 10px;
padding: 10px;
border: 10px solid green;
}
.test {
box-sizing: content-box;
}
.test2 {
box-sizing: border-box;
}
Browser Support
The following table will show you the current browser support for the CSS box-sizing
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 10 | 29 | 7 | 5.1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 29 | 14 | 6 | 1 | 4 |
Last updated by CSSPortal on: 1st January 2024