Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model.
Anyway, I have a recommendation for your CSS going forward:
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
This gives you the box model you want. Applies it to all elements.
Full Article: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Reddit Discussion: Is it a bad practice to apply a global “box-sizing: border-box;”?
