CSS3 Tutorial: box-sizing

Box sizing

box-sizing

The box-sizing CSS property allows you to alter the way the browser calculates the demensions of box element: with or without paddings, margins or borders

Syntax: content-box | padding-box | border-box

Browser support

Examples

/*Default CSS style. The width and height properties are calculated including only the content, but excluding borders, margins, and paddings.*/
box-sizing: content-box;
/*Width and height properties include paddings , excluding the borders and margins. */
box-sizing: padding-box;
/* Width and height properties including the paddings and borders, excluding margins. Resembles the  Internet Explorer Quirks mode box model .*/
box-sizing:border-box;
/* */
box-sizing:inherit;

Example1: the three CSS box sizings

Box sizing
Image 1. The property box-sizing at work with three different values: content-box, padding-box and border-box

The CSS

div.box{
	width:300px;
	padding:20px;
	margin:10px;
	border:solid 5px #99baca;
}

div.containerContentBox{
    box-sizing: content-box;
}

div.containerPaddingBox{
    box-sizing: padding-box;
}

div.containerBorderBox{
    box-sizing: border-box;
}

The HTML

<div class="containerContentBox box">
    <h2>Content box</h2>
    <p>box-sizing: content-box </p>
</div>

<div class="containerPaddingBox box">
    <h2>Padding box</h2>
    <p>box-sizing: padding-box;</p>
</div>

<div class="containerBorderBox box">
    <h2>Border box</h2>
    <p>box-sizing: border-box;</p>
</div>

Check this example in your browser

Leave a comment