I admit the box model isn’t something I specifically think about, at least not in those terms. Sure I’m concerned about padding and margin, and sometimes I want a border. But unless someone asks “can you describe the box model for me?” my brain doesn’t go there.
So base line, this is how Chrome interprets the box model on google.com
The blue is the element in question. Since I didn’t select anything it’s showing me the model for the window, and there are no values for padding, border or margin. But this is a useful part of the dev tools when trying to understand how the browser interprets the sizing and spacing I’m including in my CSS files.
But this isn’t “intuitive.” My brain tends to process things as analogy so here’s what I came up with using google maps and the preview app on my Mac:
The blue squares are the main living quarters in these houses and represent the elements in question. Obviously real estate is not a perfect analogue for the box model and I’m glad it’s not, but I think it might give us some useful mental hooks. The red square is the fence line, and in this case the fence is on the property line. The house surrounded by red has fences on three sides, a literal border that is 4in solid cedar. See how useful that is?
The house is padded from the border, denoted by the green box. The orange box is roughly the property boundary setback. Just as a setback is space where your neighbor isn’t supposed to build anything, a margin is the distance that other elements are supposed to stay back from an element’s border and padding. Unintentionally this is (sort of) an example of how margin collapse works, as the house on the left will also consider the orange margin part of its box model.
But what about this “box-sizing: border-box” thing I see all that time?! What’s up with that? box-sizing: border-box is the municipality’s attempt at uniformity. Instead of having to send someone out to measure the size of the plat then figure out where the setbacks should be as regards the fence the city would prefer it look something like this:
I copied the elements from the first image into this one. The yellow boxes represent the property lines, which is a reasonable approximation for border-box. Instead of thinking that your fence (red box) can be on the property line, the city wants your fence (and your neighbor’s fence) to be at the edges of the setback (orange) from the shared property line (yellow). Now there’s no arguing about whether the fence is encroaching on the neighbor’s plat and the city gets an uninterrupted ten feet of setback to, well, do whatever a city does with a setback.
In our code this means the outside edge of the margin indicates the new outside of the box; that’s the edge of the orange that’s touching the yellow box. Our CSS border (red fence) will be inset from the yellow box by the thickness of the margin (orange setback). Of course if the original idea was to have a 30 foot wide garage between the house and the fence and the fence now has to be five feet from the property line, that means everything has to adjust on all sides… which further means the small path on the other side of the house, which was created by the required setback (orange) also has to be adjusted. In the end the house might end up being smaller than we expected if we require a specific amount of space on each side. This also happens with our images when we set border box so you have to ask: do you want the house to be 100x100feet or do you want the entire plat to be 100x100feet?
CSS-tricks has a great demo about the different box-sizing options here.
kmskelton 