B://B: Box Model

 

Josh Cooper
#Development | Posted

Primer:

My previous post went off the trail a bit from my original intent for my new series of web development: back to basics. This week we are back with what I hope will be the ‘ah-ha’ moment for some people out there and just a nice refresher for the others. When talking about the box-model in css-based layouts, what we are referring to is that all elements on a web page are a rectangle box of some kind. What this means is that there is a behavior to how the browser calculates the width and height of these elements of themselves and the relationship of one element to another.

The facts:

Each element has its own individual box-model associated with it. The model is used to calculate the width and height of the element and the space around it. The formula is fairly straight forward:

Width:

Left margin + left border + left padding + THE DECLARED CONTENT WIDTH + right padding + right border + right margin

Height:

Top margin + top border + top padding + THE DECLARED CONTENT HEIGHT + bottom padding + bottom border + bottom margin

Using this knowledge we can calculate the width and height of our example element declared below:

 #example { border: 1px solid #000; height: 200px; margin: 15px; padding: 10px; width: 300px; } 

Based on those declared values, our totals would be:

Width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px

Height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

Knowing this simple formula is highly powerful in understanding why elements interact with one another in the manner that they do. It has implications in floating elements, positioning (relative/absolute/fixed), undeclared block widths and most certainly inline elements. On that topic, inline elements also have margin, padding and border like any other block element on the page. The main difference is that the margin left/right and padding left/right are applied the first and last lines, if the element wraps to a new line.

Extra Tips and Tricks:

With the introduction of the CSS3 box-sizing property, we get to step back into a realm where ie6 was ‘kind-of right’ in determining the overall width/height of an element. Without going into great detail in this post, we can declare whether or not we want the width/height of the element to expand outwards like we are use to with the box-model or cut into the overall declared width/height and expand inward. The advantages with using this property would be the overall understanding of how your padding and margin affect the element in question and therefore you can achieve the layout your after with more precision.

Wrap up:

The box-model is an essential technique to understand in front end web development. The better you understand how and why elements are sized and behave on a page, the easier the whole development process will be. Debugging overflowed elements in containers and why floated elements may push down to new lines is easily achievable when you understand the behavior of the element. It is a fundamental idea everyone should have down and with new CSS3 properties, we can build on top of the idea to create better and more robust websites.

Josh Cooper