New to css layouts or a Ninja warrior we both share one common headache, The Box Model. The box-model is the way we calculate the width and heigh of an object. The W3C modal calculates the width and height by adding the padding and border to the width you specify ( width + padding + border / height + padding + border ). This is a pain when we want to specify a width to be 400px wide, we need to then subtract the difference of the padding and border to make a 400px wide box. If we had a border of 10px and a padding of 20px, the width would be 340px wide (400 - 20 - 40 = 340px).

A quick tip for users who like the idea of using SASS-powered stylesheets, but may not want to bother setting up a development framework to do so.