CSS box model: box-sizing Reset

Examine the CSS source code for details on using box-sizing property.

Padding and borders add to the size of a box model. This can sometimes cause difficulty as adjustments to the padding or border can ruin otherwise well positioned layouts. The box-sizing property can be used to include padding and border size in the box model measurements.

Default Box Model

In the example below, the four items cannot display on the same line, despite the 25% width each shares. This is due to the additional width added by the padding and border.

.item{
	background-color:#ababab;
	border:solid 1px black;
	padding:0px 5px;
	float:left;
	width:25%;	
}

Item One

Item Two

Item Three

Item Four

Using box-sizing: border-box;

Using box-sizing: border-box; will include the padding and border in the box model measurements, Reducing the need to adjust widths and heights to accommodate your desired box model dimensions.

.item{
	box-sizing: border-box;

	background-color:#ababab;
	border:solid 1px black;
	padding:0px 5px;
	float:left;
	width:25%;		
}

Item One

Item Two

Item Three

Item Four

Apply To All Page Elements

If you want all page elements to use border-box sizing, apply it to the <html> root tag and then ensure explicit inheritance using the universal selector, eg:

/* ensure all page elements use box-sizing:border-box; */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

The code above will apply the border-box effect to all tags, including pseudoelements. Learn more from this CSS Tricks Box Sizing discussion.