Box Sizing – Make width = width

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 content-box.

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.

Useful Links

Paul Irish on Box Sizing
The MDN Reference

Leave a Reply

Your email address will not be published. Required fields are marked *