The CSS Box Model, or Should I Reset?
An excerpt from my free box model git-book.
Overview
In the beginning, there was a single box model, and it was good. If you already know this story, you’re probably rolling your eyes. There was never a single box-model, and it was never good. Only a single box-model was initially specified, but like just about everything else in the late 90’s and early 00’s, Microsoft ruined it. Perhaps that’s a little unfair, the crux of this article is that by a fluke accident (assuming the best of Microsoft actions) a somewhat poorly designed portion of the specification was saved by the browser wars.
The Brass Tacks
So what are we talking about? Well the css box model is how the browser determines the total size of your elements. The initial specification added borders to the already established size of the content box, tacking on additional dimension. However, the ‘IE Box Model Bug’ calculated the width of the box as being content + border.
You can compare this box model with the one above, you can see this box model adds the border to the element width calculation.
So where’s the bad? Well the bad comes in two places, first is the specification. While all things are surmountable with practice, the initial specification defies common expectations of measuring dimension, and flies in the face of all real world considerations of measurement. When you measure a box for shipping, do you measure the box with it’s content? When you place a picture in a frame, does the total width exclude the border? I think the majority of people agree that when we measure things in the real world we measure the practical dimension, not some sub dimension of the given item.
From the horses mouth:
“In my opinion this model is completely illogical. Logically, a box is measured from border to border.” — Peter Koch
“An obvious question is, “Isn’t working with the default model just a matter of learning a different way of saying the same thing?… the simplest argument against the default box model: it approaches layout differently than actual designers do. — Fred Meyer
The second bad comes from browser inconsistency. While there are arguments for and against either box-model, there’s little argument for inconsistencies between browsers. So in the beginning, there were loads of problems with the box-model. First designers had to rethink how to work with borders, and second those solutions only worked in non-ie browsers.
Did Anyone Ever Create Anything?
I’m still fairly young and when I read about the old internet wild west days, I’m bewildered websites ever launched. Somehow through perseverance and cleverness, the web was a usable tool and play ground for many. The box model bug was largely resolved using ‘Quirks Mode’ tricks in IE, or browser specific css, but not without losing a few hairs. I read quiet a bit, but decided to not completely unravel the solutions used in the past, because thankfully they are largely irrelevant. If you want to look into this, look up Quirks Mode, and Quirks Mode Box Model.
Now What?
In the present, there are two box-models, and they are good. Thankfully this is true without reservation. Now we can select between both box-models using the box-sizing css property. When to use which box-sizing model is somewhat complicated and I hesitate to lay out absolutes, but I’m going to give some suggestions that will help everyone except people who probably shouldn’t even be reading this article (you know who you are, don’t you have a framework to update or specification to write?).
Based on my research, I see a strong argument for using the Universal Box Sizing Reset to reset all your divs to the border-box css model. Here it is in it’s simplest form:
* {
box-sizing: border-box;
}This version naively resets all html elements to border-box. If you’re still new to design and development and are having trouble making designs that seem to behave logically, this is probably going to help. Now your elements will have dimension equal to their content and border. I cannot tell you how many times I’ve been working on a design, and just adding this “fixes” all the inconsistencies. Does it introduce other problems? It can, in fact it somewhat messes with images.
There’s an argument to be made that replaced content such as img, video and svg, should not have it’s box-sizing changed as it can cause unwanted scaling. In fact, it can even mess up the aspect ratio of the content if the left/right & top/bottom borders have different thickness. I hope this last point is obvious to everyone. The sum of your horizontal and vertical borders must be equal otherwise the image will scale into the inconsistent portion and the aspect ratio will change.
Surgical Precision
We just saw the dangers of the Naive Universal Box Model Reset, however with a little more finesse, you can take the good without the bad. There are several variations in total. The two most sophisticated are the Root Inherit Reset.
:root {
box-sizing: border-box;
}
*, *:after, *:before {
box-sizing: inherit;
}and the Root Inherit, Preserve Replaced Content Reset.
:root {
box-sizing: border-box;
}
*:not(img):not(video):not(svg), *:after, *:before {
box-sizing: inherit;
}The Root Inherit Reset allows you to set up the reset using an inheritance structure that can be overridden in subcomponents using box-sizing: initial.
The Root Inherit, Preserve Replace Content Reset gives you the benefits of inheritance, while ignoring replaced content so they won’t be distorted.
Why Should I Listen to You?
You shouldn’t. I’m probably not that much further along than anyone who has the tenacity to read an article about the CSS Box Model. However, I conducted a very thorough research on this topic and I’m confident I know what true professionals think on the topic. I made sure to cite and list all my sources and collected as many quotes from critical community members as possible.
If you’d like to learn more on this topic, please refer to my free git-book. Even if you don’t want to read what I had to say, I kept a list of every article I cited. Here is a simple directory structure.
Chapter 1: Introduction Information
Chapter 3: Box-Sizing To The Rescue
Chapter 6: Projects Using Universal Reset
