What is box-sizing and border-box?

Problem

In the latest WordPress theme, twentythirteen, I noticed styles that had padding didn’t affect the width of my box.  Whenever I add padding, the inside just got smaller and the outside stayed the same.  Was I dreaming all this time thinking the padding affected the overall width?  What world was I living in where you say this div is 100px wide, but if there’s 10px padding on each side the width should actually be 80px?

Solution

No, I wasn’t dreaming.  The WordPress twentythirteen theme has a style called

box-sizing:border-box

.  This causes the width to stay the width and the padding to be on the inside and not affect the width.  This is amazingly supported in IE 8 and up, and, with some prefixes, webkit and firefox.    I will always be using the below code from now on.

* {
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}