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;
}