This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

box-sizing

Summary

The box-sizing property alters the CSS box model used to calculate widths and heights of elements, so that they can be equal to the width and height of the content-, padding- or border-box.

Overview table

Initial value
content-box
Applies to
all elements that accept width or height
Inherited
No
Media
visual
Computed value
specified value
Animatable
Yes

CSS Object Model Property
:

Syntax

  • box-sizing: border-box
  • box-sizing: content-box
  • box-sizing: padding-box

Values

content-box
The width and height properties (also including min-width, max-width, min-height and max-height properties) are calculated as the width/height of the content, but not the border, margin, or padding. This is the traditional behaviour of width and height as specified by CSS2.1.
padding-box
The width and height (also including min-width, max-width, min-height and max-height properties) of an element are calculated as the width/height of the content plus the padding. The dimensions of the content alone are thus calculated by subtracting the padding widths from each side of the element. Dimension properties are set to 0 if the calculated value is less than 0.
border-box
The width and height (also including min-width, max-width, min-height and max-height properties) of an element are calculated as the width/height of the content plus the padding and border.

The dimensions of the content alone are thus calculated by subtracting the padding and border widths from each side of the element. Dimension properties are set to 0 if the calculated value is less than 0.

Examples

The following examples assume markup that looks like this.

<div class="parent">
    <div class="child"></div>
</div>

This CSS makes it so that the child <div> will always An element with padding that occupies half the width of its parent. This works because it has box-sizing: border-box set on it, so the total width will always be content plus padding plus border. As the border and padding get thicker, the element doesn’t get larger. Instead, the content gets smaller to make way for the change.

/* Support Firefox, WebKit, Opera and IE8+ */

.parent {
   width: 50%;
   height: 200px;
   background: red;
 }

 .child {
    border: 30px solid rgba(0,0,0,0.5);
    float: left;
    padding: 3rem;
    background: blue;
    width: 50%;
    height: 100px;
    box-sizing: border-box;
 }

View live example

Input elements with type search are rendered with border-box in Safari 5 and Chrome. You can normalize this behavior across all browsers using the following code.

input[type="search"] {
    box-sizing: content-box;
}

Related specifications

CSS Level 3 - Basic User Interface Module
W3C Working Draft

See also

Related articles

Box Model

Other articles

External resources

Attributions