CSS Box-Sizing

Having a little knowledge of how the box-sizing property works and when you can utilise it is a neat trick to have up your sleeve. The reason for using the box-sizing property in your CSS is to alter the default CSS box model. Modifying the box model gives you the option of whether or not an element’s width and height include padding and border or not.

In web design every element is a box and each box has a content area (e.g. text, an image, etc.) and optional surrounding padding, border and margin areas. The size of each area is specified by their properties. In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border. In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border. By default, all browsers use the W3C box model (except IE in “Quirks Mode”, which uses the traditional one).

both box models

Modifying the Box Model with Box-Sizing

The CSS box-sizing property has 2 values: content-box and border-box. Changing the value tweaks the way the box model works on the targeted element/s.

content-box
This is the default style as specified by the CSS standard. The width and height properties include only the content; not the border, margin, or padding.

border-box
The width and height properties include the padding and border, but not the margin.

Note:
At the time of writing, there is also another proposed method padding-box, but it’s currently at risk of being removed so I have decided to leave out the technical details of how it works.

A little example

Here is a little CodePen to hopefully give you a better understanding. Each box has the same properties except the box-sizing is altered. Don’t be afraid to dig into the code!

Going forward

I’m a big fan of box-sizing, especially setting everything to be the traditional box model like Paul Irish suggests in his post. It can be tricky to just drop it into an existing site, but if I’m starting a new build then it’s one of the first lines of code written. It’s really up to you in how you roll, but I would highly recommend having a tinker. You might be surprised.

Further reading

Jake Bresnehan

A Front End Developer based in Sydney and the creator of Web Design Weekly.

Web Design Weekly keeps developers at the forefront of techniques and trends whilst helping them learn and grow to produce top quality code to make the web a better place for all.

This post currently has no responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

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

Current day month ye@r *