upliftingcode: Using CSS border-box to create better layouts - deciphering the web one variable at a time

Using CSS border-box to create better layouts

When doing layouts in CSS, all developers eventually come across something called the "box model". When first starting out, most assume that setting the width of an element in CSS will mean the visible element on screen will be the set width.

Unfortunately this is not the case! The width of the visible element on screen is actually width + padding + border. The exact same rules apply to the height of the element too.

Over time this is something all developers get use to (like many other quirks) but it can be very annoying when defining layouts and grid systems where you want your columns to be a certain width and not auto expand when you add padding and border values for design.

Is there any way around this? If there wasn't, it would make for a very short article. In fact in CSS3 there is a property called box-sizing. The box-sizing property tells the browser what type of box model to use for an element. The box-sizing property has three main values (not including inherit). By default all elements use the box model described above, which is called content-box.

What is needed is the value border-box. This value makes the width of an element equal to the set width and includes the padding and border values inside of the element instead of outside in content-box.

So thats ideal right for our layout and grid systems. It has even got Google Chrome Developer Advocate Paul Irish suggesting to use it on all elements with the below code.

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}