The problem
Which web designer has not encountered this dreadful issue? The project gets grows in size and one loses track of all the paddings, margins borders, and cross-dependencies of all kinds of elements. Especially when it comes to pixel-perfect design one quickly gets into trouble.
A simple CSS statement promises relief: *{box-sizing:border-box}! Oh, how I wished that I knew this from the very beginning. Many books lack this simple trick. The statement practically does what you always wanted: padding and border are taken into account when the total width of an element is computed.
In other words: Yay, no more calculation or clumsy calc(X% - Ypx) statements in your CSS code! It actually means your elements are exactly as wide and as high as stated by width statements. Period.
If one can neglect the support of some shitty browsers one should always include this CSS3 statement. If one can not renounce on the browser support one can still make use of so-called polyfills. These fill in the gap and provide CSS and JS workarounds to provide the missing features.
Example
box-sizing:content-box (default):
border:4px;margin:7px;padding:10px;width:300px;
Total width:8px+20px+300px=328px
box-sizing:border-box:
border:5px;margin:7px;padding:10px;width:300px;
Total width:300px