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 is calculated by adding the width/height + padding + border. So for example, if an element has its width property set to
500px, a left and right padding of 10px and a left and right border of 15px, then the actual rendered with 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 on the element determine the border box of the 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 through 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.
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources
