CSS propertyBox model
box-sizing
Decides whether width and height include the padding and border.
- Initial value
content-box- Inherited
- No
- Animatable
- no
- Applies to
- all elements that have a width or height
- JavaScript
element.style.boxSizing = "border-box"
Example
#CSS
*,
*::before,
*::after {
box-sizing: border-box;
}Example HTML
<div class="stage">
<input placeholder="A field at 100% width won’t overflow its container" style="width: 100%; padding: 10px 12px; border: 2px solid #525252; border-radius: 8px; box-sizing: border-box;">
</div>Preview
Definition and usage
#The box-sizing property changes how an element’s size is calculated. With the default content-box, width and height apply to the content alone, and padding and border add extra size on top.
With border-box, the given width is the element’s total width, including padding and border. The content then shrinks to fit. This is much more intuitive, which is why many projects set border-box on every element.
A popular reset looks like this: *, *::before, *::after { box-sizing: border-box; }.
Syntax
#Syntax
box-sizing: content-box | border-box;Values
#- The element has 200px of content plus 2 × 16px of padding and 2 × 8px of border, so 248px total. The green bar is 200px.
- The whole element is exactly 200px, the same as the green bar.
Values in practice
#content-box
The element has 200px of content plus 2 × 16px of padding and 2 × 8px of border, so 248px total. The green bar is 200px.
.demo { box-sizing: content-box; }border-box
The whole element is exactly 200px, the same as the green bar.
.demo { box-sizing: border-box; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Add a
border-boxreset at the top of every stylesheet. It saves you from counting pixels. - Form fields have a different default
box-sizingthan other elements in some browsers; a reset makes them all consistent.
Related entries
#Spotted a mistake or missing an example? Write to us.