A brief explanation on how browsers calculates HTML elements sizing.

box-model-calculation.md

Explain how the width of an element is calculated, taking into account the element's content, padding, border, margin, etc.

The math behind element width calculations.

The browser ability to calculate HTML element's width is fundamental to placing them at the right place at the right time.

Anatomy of element sizing.

Browsers calculates the size of any element by its box model parameters.

Box model is a box shaped representation of the element, even if the element is rounded/oblique.

Box model representation is compounded by layers that have its widths summed up to calculate the element's size.

The image below demonstrates the box model layers.

What each layer represents?

• Border: Border is the boundary that protects the element's inner content. Like a castle wall.
• Padding: Is the space between the border and the inner content. You may visualize padding as the distance between the walls and the castle.
• Content: Is the castle per se. The content may be almost anything (text/image/whitespace/etc)...
• Margin: Is a whitespace between the borders of the box and another html elements. (In this case, the distance between this castle and another castles)

Browser's rendering logic.

To fully understand how browsers interprets the box model attributes into visual elements, we are going to use the example below:

HTML/CSS code:

<div class="content-box">Content box</div>
<div class="border-box">Border box</div>

div {
  width: 70px;
  height: 70px;
  background-color: #ccc;
  border: 5px solid red;
  padding: 10px;
  margin: 10px;
  float: left;
  text-align:center;
  
}

.content-box {
  box-sizing: content-box;
}

.border-box{
  box-sizing: border-box;
}

Rendered HTML/CSS:

Browsers are allowed to calculate the box model representation in two ways:

Content Box

Content box method at first glance is very trick to understand. Why?

Because in our example we set width: 70px; height:70px; but the rendered element is being rendered as width: 100px; height:100px; and the total area of width: 120px; height:120px; if we consider the margin area.

This happens because the content box rendering method calculates all the box model layers from the content perspective.

So, given the CSS attributes:

width: 70px;
+ left padding: 10px;
+ right padding: 10px;
+ left border: 5px;
+ right border: 5px;

//In case considering margins as object part .
+ left margin: 10px; 
+ right margin: 10px;
--------------------
Results in the width of ```120px```;

Border Box

This method calculates the element size through its border perspective.

This means the browser will subtract margin and padding width from the content size to make the element fit the width: 70px; height:70px;. Resulting in this calculation:

width: 70px;
- left padding: 10px;
- right padding: 10px;
- left border: 5px;
- right border: 5px;
--------------------
Results in the content width of ```40px```;

You can see and inspect the live demo of this example HERE.

Daily approach to box sizing.

As we have seen, browsers renders elements widths in two distinct ways.

The old and counter intuitive content box that works in older browsers.

And the newer intuitive and well established border box.

If you're not going to need to support very old browsers you may use this code to tell the browser to use box-sizing: border-box :

/* Set all elements to be calculated with the border-box method. */
* {
	box-sizing: border-box;
}

Otherwise you may use this article and another online references while supporting box-sizing: content-box until you internalize its procedures.

Guilherme Soldateli

09/18/2017

Career Path 3: Modern Frontend Developer