This post will take less than a minute to read.
Let’s say that I am coding up a page that has 2 columns, each at 50% width. Easy. Except the text doesn’t read so well without padding. Ok, so lets add some padding in; 20px should be plenty.
Layout = broken.
I no longer have 2 columns at 50% width. My columns are now stacked as their width is in excess of the 50% I defined. While this is standard behaviour based on the box model, it can be confusing and also frustrating to work with. There is an easy fix though: box-sizing: border-box;
.
Using box-sizing
forces the padding (and borders) inside the element rather than outside and it works on all browsers down to IE8, although you will have to use browser prefixes:
.box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
For more information on how the box model works, check out this thorough write up: https://developer.mozilla.org/en-US/docs/Web/CSS/box_model.