Importance Of Box-Sizing CSS
This should be a normal web standard by now for all web design developers (for us it would be users developing themes for MyBB/Jcink/whatever software we use to roleplay).
box-sizing: border-box; is here to save the day for those troubling with padding and border causing additional pixels to your widths.
I have attempted to make this guide short and to the point but also giving a bit of insight as to what exactly this magic trick can do for you!
-----------------------
What is my web page/themeing/etc. like without border box?
Lets say you have an element set to 200px width (like a sidebar) but the thing is, you NEED it to be that width and not exceed such width. However you went to add a border around it, maybe padding inside and that made the width go further! How frustrating right? So now you have to figure out for example if you added 20px of padding, that means 40px all together (both left and right) so to get your element back to 200px you have to subtract and make the set width 160px. This can be annoying and very tedious but is quite common for a lot of theme creators to deal with these days.
What is my web page/themeing/etc. like with border box?
So that element we discussed having 200px width and you need it that way will stay 200px in width NO MATTER the amount of padding or border you add! This is because border box counts that as part of the element so adds those inside the width. Not a pain in the rump! You can now avoid the tedious calculations of the past and continue forth ready to wield the hammer and pound out your greatest and newest contribution to the web space themes.
-----------------------
Well how do I use this? Simple really lets reset your HTML to use border box and then reset other elements to inherit this trait! You will need to add this to a global version of your CSS (one that is attached to all pages).
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
