This is one of those things that has the potential to drive you absolutely crazy. I know, I know. What isn't?

Understanding box-sizing is a vital aspect of being a competent web developer. If you find yourself adding border or padding to an element, and adversely affecting your page layout in the process, there's a good chance it's because box-sizing needs some attention.

So what is it exactly?

Box-sizing is a CSS property which alters the "box model" used to calculate the width and height of an element.

Uh-huh. And the box model is?

The box model surrounds every HTML element on your page. It consists of the individual bit of content (E.G. an image, a piece of text), padding (the area around the content), border (a border surrounding the content and padding) and margin (the area outside the border).

Well that's clear as mud. Let's go through an example

I have some headline text:

Basic headline content

I decide I want a border around it:

Basic headline content with a border

Oh that won't do at all. The text needs breathing room! I'll add some padding:

Basic headline content with border and padding

Much better. And now I'll add margin to the outside so things don't get too close to the border:

Basic headline content with border, padding and margin

So there you have it. This is the box model, it's as simple as that. Content plus padding, border and margin.

OK I get it now. But going back to the box-sizing thing?

Now we've got our headline text, we can use it to demonstrate box-sizing more effectively. There are two possible values for box-sizing:

box-sizing: content-box; - this option is what is set by default. It includes the content. Nothing more, nothing less! So in our example - the only thing included in this is the headline text:

Basic headline content

box-sizing: border-box; - this option includes the content, padding and border (but not the margin).

Basic headline content with border and padding

You might already be starting to see how this could cause problems. Because content-box is set by default, when you give an element a width of say 500px, you're only actually saying "Make my image 500px wide", or "Make my text 500px wide".

With box-sizing: content-box;, any padding or border you add will increase the width of your element! This can then throw everything else out of alignment because your element suddenly becomes bigger than you expected it to be.

Border-box to the rescue! With box-sizing: border-box;, any padding or border you add will automatically be included in the width you specify.

Let's look at an actual example in the browser

If it's still slightly unclear, hopefully these screenshots of an actual example webpage will clarify things somewhat.

Here we have a viewport which is 400px wide. There are two images, "boat" and "opera" which are each exactly 200px wide. You can see they align perfectly and fill the 400px width completely.

Default content-box setting

We want to add a border to them so they stand out a bit. But wait, adding a border has stopped the images sitting perfectly side-by-side! That's because content-box is set by default, which means any border or padding you add is going to be added on top of the 200px width you actually wanted!

Adding border to content-box

This perfectly illustrates the problem content-box can cause. So let's use our new found knowledge of border-box to fix it.

Changing to border-box fixes things

By adding the css box-sizing: border-box; we've said the 200px width we specified should include any padding and border we add. So now our images are back to being 200px wide like we expected!

That seems way more intuitive than content-box. Why isn't this set by default?!

That's what I thought, and I can't tell you why. But, we can add some css rules to our stylesheet which will apply this behaviour to all elements by default:


html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

Add this to your template that you create all your new projects with, and you'll no longer have to worry about remembering border-box when dealing with your own code. But remember - if you're working on a website someone else has written, they may not have done the same! So keep box-sizing: border-box; in the back of your mind if you find your padding and borders doing unexpected things.