A Look Into: CSS3 Box-sizing

This article is part of our “HTML5/CSS3 Tutorials series" – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

Not so long time ago, when we create a box in a web page, let’s say with a div, we specify 100px for both the width and the height, followed by padding for 10px and borders of about 10px as well.

div {
	width: 100px;
	height: 100px;
	padding: 10px;
	border: 10px solid #eaeaea;
}

The browsers will expand the box’s size to 140px, where this amount 140px of the total width/height is made up of the addition of the padding and the borders as follows; 100px [width/height] + (2 x 10px [padding]) + (2 x 10px [border]).

However, sometimes this result is not what we expect it to be. Sometimes, we need the box to always be 100px regardless of the padding or the borders added.

To overcome such a recurrent problem when creating web page layout, we can use the CSS3 box-sizing property to control how the CSS box model should work in the browsers.

Using box-sizing

The box-sizing property has two value options, first the content-box; which is the default value, when using this value the box model will behave as we have described above.

And the second one is border-box, where the box’s size will be calculated by substracting the specified content’s size with the padding and the borders added.

div {
	width: 100px;
	height: 100px;
	padding: 10px;
	border: 10px solid #eaeaea;
	box-sizing: border-box;
	-moz-box-sizing: border-box; /*Firefox 1-3*/
	-webkit-box-sizing: border-box; /* Safari */
}

For instance, when we have a box like what we have described above (100px square with 10 pixels for the padding and the borders), the content’s size will decrease to 60px, and the total size of the box remains 100px, where the equation of the subtraction can be described as follows; 100px [width/height] – ((2 x 10px [padding]) + (2 x 10px [border])).

Browser Support

The box-sizing property is supported in all browsers; Firefox 3.6+, Safari 3, Opera 8.5+ and Internet Explorer 8 and above.

So, if you know that most of your visitors will not be using Internet Explorer versions below 8, you can use this useful recommendation (thanks to Paul Irish).

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box; /*Firefox 1-3*/
	-webkit-box-sizing: border-box; /* Safari */
}

The snippet above will apply the box-sizing property to all the elements on your web page.

Example

In this section, we will show you a real-life example on how we can make use of this box-sizing property. We will create a simple navigation, based on the HTML markup below, with five link menu in it.

<ul>
	<li><a href="#">Menu 1</a></li>
	<li><a href="#">Menu 2</a></li>
	<li><a href="#">Menu 3</a></li>
	<li><a href="#">Menu 4</a></li>
	<li><a href="#">Menu 5</a></li>
</ul>

Then, we will add some decorative styles; such as, set the navigation’s fix width for 500px and the link’s width for 100px each, then inline the list item, and give different backgrounds for each link menu, so you can see the difference between them.

nav {
	width: 500px;
	margin: 50px auto 0;
	height: 50px;
}
nav ul {
	padding: 0;
	margin: 0;
}
nav li {
	float: left;
}
nav a {
	display: inline-block;
	width: 100px;
	height: 100%;
	background-color: #ccc;
	color: #555;
	text-decoration: none;
	font-family: Arial, sans-serif;
	font-size: 12pt;
	line-height: 300%;
	text-align: center;
}
nav a {
	display: inline-block;
	width: 100px;
	height: 100%;
	color: #555;
	text-decoration: none;
	font-family: Arial, sans-serif;
}
nav li:nth-child(1) a {
	background-color: #E9E9E9;
	border-left: 0;
}
nav li:nth-child(2) a {
	background-color: #E4E4E4;
}
nav li:nth-child(3) a {
	background-color: #DFDFDF;
}
nav li:nth-child(4) a {
	background-color: #D9D9D9;
}
nav li:nth-child(5) a {
	background-color: #D4D4D4;
	border-right: 0;
}

At this point, our navigation just looks normal.

However, the problem will come when we add left or right borders to the link menu.

nav a {
	border-left: 1px solid #aaa;
	border-right: 1px solid #f3f3f3;
}

The menu will overflow to the bottom, as the link’s width is no longer 100px. It is now 102px, causing the navigation’s total width to be 10px longer then we have specified above (500px).

To overcome this issue, we need to apply the box-sizing property, as follows:

nav a {
	border-left: 1px solid #aaa;
	border-right: 1px solid #f3f3f3;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

Photoshop CS6 Download