Box-sizing solves a problem that has been making front-end development more confusing for years. The problem is when you add padding and borders to elements on your page, the layouts will often break or in general cause things to look different than you expected. If you change the
box-sizing value to be
border-box the padding and width of the element will be contained inside of the specified element’s width, instead of adding it to the width like the default behavior of
The box-sizing property is such a great little solution Chris Coyier decided to declare February 1st as International box-sizing awareness day. I’m a little bit late for that, but I do want to include this little snippet here and do my part to help promote the usefulness of this property.
Here is a video that demos the issue and how useful box-sizing can be.