The CSS Box Model and Box Sizing

SEPTEMBER 10th, 2017

In my last post I wrote about how I was an idiot and pushed an ugly mess to my blog making it look terrible on mobile devices. The problem I was having stemmed from my ignorace around the use of width and height properties and the particulars of the CSS box model.

In this post I'll discuss how the box model works by default and how to change that behavior to make sizing elements more straight forward.

Every HTML element on a web page is represented as a rectangular box by the browser. This includes images, text, iframes, pretty much every HTML element there is. The box is made up of four areas that sit inside each other like concentric circles. Starting with the innermost area and moving outward they are the content area, padding area, border area and the margin area.

box-model

When changing the thickness of the padding and border, the calculated size of the element can be interpreted two different ways by the browser. This behavior can be adjusted by using the box-sizing property.

box-sizing: content-box; is the default value. When using the default behavior, the values of the width and height properties will apply only to the content area. Any adjustment to the padding or border will be in addition to the size of the content area.

parent container

box-sizing: content-box;

width: 100%;
height: 190px;
padding: 0;
border-width: 0;

parent container

box-sizing: content-box;

width: 100%;
height: 190px;
padding: 5px;
border-width: 8px;

In the example above (which I ripped off from Mozilla's web docs) there is a parent div with a child that has width: 100%; and height: 190px;. Notice that when the thickness of the padding and border is increased this is added to the values of the width and height properties. Here is the reason I ended up with the bugs I wrote about in my last post. The additional pixels can make it quite difficult to accurately size HTML elements, especially in relation to any surrounding elements on a web page.

Thankfully, CSS enables us to change this default behavior with box-sizing: border-box;. By changing this property the browser is instructed to include the values specified for padding and border in the width and height properties. If an element's width and height are set to 100px, this will include any padding and border defined for the element. The content area will shrink to accommodate the padding and border and the element will remain 100px X 100px.

The example below is the same as the second element in the first example. The only difference being that box-sizing's value changed from content-box to border-box. Now the element maintains the width and height initially defined.

parent container

box-sizing: border-box;

width: 100%;
height: 190px;
padding: 5px;
border-width: 8px;

Head out into the interwebs and it'll obvious that many if not most web developers prefer using this method to make sizing elements easier. Taking their lead I've begun doing this everywhere and my ability to layout a webpage has become much more fluid and enjoyable.

Before learning about any of this I spent a painful week dealing with sizing issues. I lost sleep over it. Then my mentor Rob, mercifully passed me the following CSS to add to the top of my stylesheets. Thank God.