What is box-sizing and when to use it?

Published 31 Jan by SuperNOVA

What is box-sizing and when to use it?Box-sizing is one of the lesser known properties of CSS, but by no means is it any less important. In fact, using box-sizing can make your code a lot more logical and intuitive. Lets learn some more about this property.

Lets say you wish to create a grid of items having 4 columns, the grid width being 1000px. Now, you can give the boxes a width of 250px (not counting margin for now) and give them a float:left; to make your perfect grid. But what happens when you add borders and padding to the boxes. Well, that actually depends on your browser, most probably the width of the boxes increases leading to the deformation of your setup.

Now, you could say that you will just do some quick calculation and decrease the width of each box to make the grid perfect again. That is true if you are hell bent on using the width of the grid as 1000px. But, we all know that in today’s age of responsiveness, there might be a situation when you need to use percentage values instead of pixels. If that is the case then there is no way that you can achieve your required effect with the current set up.

The Solution?

Here comes a CSS property that can help in cases like this:box-sizing. The CSS box-sizing property helps the browser decide that how are the elements going to fit in a certain area.
The three values supported by this property are:
  • border-box: My personal favourite. The padding and borders of an element are considered a part of the width/height of the element and any increase in the padding won’t increase the width of the element.
  • content-box: In this case the padding and borders are not considered to be a part of the width/height of the element. This is the default case in most browsers since CSS 2.1.
  • Inherit: This means that the element will inherit the behaviour from its parent.
Consider the following exammple: What the above code renders is this:
DEMO
Shhhh!!!
This is supposed to be the content-box.
Well, then this probably should border-box.
Here, we have two elements: one having a box-sizing set to border-box, while the other one has it set to content-box. If you inspect the elements then you will notice a change in the width of the first one even though we specified a width of 200px in our CSS declaration. This is because of the fact that the padding supplied increases the width of the first box by 40px(20 X 2). The second box doesn’t show this behaviour. Now, there might be times when you want this to happen and there might be times when you want the inverse, both ways this property can help you force the behaviour of the browser.

More Uses of box-sizing

Although there might be a debate among many front-end developers about the usefullness of this property but I find it very helpful. Infact I have started using the following in all my CSS Reset code.

I think that that this makes the layout of my websites a bit more logical, which is always a good thing. When I was new to front-end developing (not saying that I am experienced now :P ) I didn’t use this and had lots of problems in making a website work in different browsers let alone responsiveness.

So, I guess whether you use it or not is up to you but if you have a better method or any comments about this, don’t forget to share!