CSS 100% width minus paddings, margins and border

img{
	width: 100%;
	background-color: #fff;
	box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);
	border: thin solid #ccc;
	padding: 10px;
}

The code above gives this result:

As you can see, the 100% width plus 10px padding exceeds the actual available width, so here is the correct code how it should be:

img{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	width: 100%;
	background-color: #fff;
	box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);
	border: thin solid #ccc;
	padding: 10px;
}

In this example the image with its paddings, margins and border fits inside the available container and 100% is not exceeding it.

More on this topic: http://css-tricks.com/box-sizing/