Improving the Box Model with Box-Sizing

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 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 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 information on how the box model works, check out this thorough write up: https://developer.mozilla.org/en-US/docs/Web/CSS/box_model.

Tweet this