Did you find this useful?
Socialize it today.


CSS3 Box-Sizing Overview

Thursday, November 29, 2012

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;


ValueDescription
content-boxThis 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-boxThe 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-boxExperimental. The width and height properties include the padding size, and do not include the border or margin. Supported by Firefox.
inheritSpecifies 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.


box-sizing property

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Responsive Web Design with HTML5 and CSS3 Sergeys HTML5 CSS3 The Book of CSS3