CSS3 Box-Sizing Overview

CSS3 introduces a very useful property called box-sizing. The box-sizing property is used to alter the default CSS box model. The box model is used to calculate the widths and heights of elements.

For browsers that adhere to the CSS box model, the width and height of an element are calculated by adding the width/height + padding + border.

So for example, if an element has its width property set to 500px, left and right padding of 10px and left and right border of 15px, then the actual rendered width of this element is 500 + 10 + 10 + 15 + 15 = 550px.

Browser Support

The box-sizing property is supported in Chrome, Internet Explorer, and Opera. Firefox supports the alternative vendor prefix property, the -moz-box-sizing property, and Safari supports the -webkit-box-sizing property.

Syntax

The box-sizing property allows you to modify the calculated width and height of an element.

box-sizing: content-box|border-box|padding-box*|inherit;

Value	Description
`content-box`	This is the behavior as specified by CSS2.1. The specified width and height apply to the content box of the element. The padding and border of the element are outside of the specified width and height of the element.
`border-box`	The specified width and height of the element determine in the `border-box` element. The padding or border specified on the element are within the specified width and height of the element.
`padding-box`	Experimental. The width and height properties include the padding size and do not include the border or margin. Supported by Firefox.
`inherit`	Specifies that the value of the `box-sizing` property should be inherited from the parent element.

Usage

The box-sizing property can be used in various situations. For example, if you need to place two boxes that include borders, side by side, it can be easily achieved by setting the box-sizing property value to border-box.

This will force the browser to render the box with the specified width and height, and place the border and padding inside the box.

So, in the following example, if your browser supports the box-sizing property, the two div elements will appear side by side rather than one div on top of the other.

Example

In this example, the two div elements will appear side by side since their padding and border widths are calculated within the border-box of the elements.

<!DOCTYPE html>
<html>
<head>
    <style> 
        #divContainer {
            width:500px;
            border:5px solid #7f7f7f;
        }

        .divBox {
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
            width:50%;
            border:5px solid #ffaa00;
            padding:20px;
            float:left;
        }
    </style>
</head>
<body>
    <div id="divContainer">
        <div class="divBox">Div is positioned on the left.</div>
        <div class="divBox">Div is positioned on the right.</div>
        <div style="clear:both;"></div>
    </div>
</body>
</html>

Results

If your browser supports the box-sizing property, you will see the two divs side by side. If not, your browser will simply use the content-box value.