Easy Box Model Solution

[kylesmith]

Instead of trying to remember all the crap with what adds to your width of a div... just add this to the top of your css.

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

Basically what it does is instead of adding width to your content area which makes your div or whatever get larger it simply subtracts from the content area. So if you wanted to not worry about breaking a design just to add some padding to a button or whatever. This is a life saver.

Borwser Support is as follows...
IE8 and up. Firefox still needs the -moz- prefix, and <= iOS4, Android <= 2.3 need the -webkit-, but everyone else uses the unprefixed.

Not that it really matters for this class...
You can find more info about a box-sizing polyfill for IE6 & 7 at html5please.us/#box-sizing (which was developed with * { box-sizing: border-box!).

Lots more info can be found here...
http://paulirish.com/2012/box-sizing-border-box-ftw/

[Instructor]

Neat! I hadn't seen this before. I'll incorporate it into future lessons.

If anyone asks why I tech these classes, it's stuff like this. Every semester I learn things from my students.