18.104.22.168 The border-box model and the box-sizing property
The standard CSS box model specifies that the width and height style properties give the size of the content area and do not include padding and borders. We might call this box model the “content-box model.” There are exceptions to the content-box model in old versions of IE and also in new versions of CSS. Before IE6, and when IE6, 7, or 8 displays a page in “quirks mode” (when the page has no or has an insufficiently strict doctype), the width and height properties do include the padding and border widths.
IE’s behavior is a bug, but IE’s nonstandard box model is often quite useful. Recognizing this, CSS3 introduces a box-sizing property. The default value is content-box, which specifies the standard box model described above. If you instead specify boxsizing:border-box, the browser will use the IE box model for that element, and the width and height properties will include border and padding. The border-box model is particularly useful when you want to specify the overall size of an element as a percentage but also want to specify the border and padding size in pixels: