Modify the CSS box model

Use:

box-sizing: border-box;

and your elements width is the width, the padding, and the border added together. That means your border and padding get added to the inside of your width property.

Also add the following vendor prefixes for Webkit and Mozilla:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

IE dose not support box-sizing but you can download this polyfill: https://github.com/Schepp/box-sizing-polyfill

This is really useful when working with responsive web design and when using percentages instead of pixels.