Improving the Box Model with Box-Sizing

This post will take less than a minute to read.

Let’s say that I am cod­ing up a page that has 2 columns, each at 50% width. Easy. Except the text doesn’t read so well with­out pad­ding. Ok, so lets add some pad­ding 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 stand­ard beha­viour based on the box mod­el, it can be con­fus­ing and also frus­trat­ing to work with. There is an easy fix though: box-sizing: border-box;.

Using box-sizing forces the pad­ding (and bor­ders) inside the ele­ment rather than out­side 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 inform­a­tion on how the box mod­el works, check out this thor­ough write up: https://developer.mozilla.org/en-US/docs/Web/CSS/box_model.

Tweet this