The Box Model

🔗Definition

Every DOM element (even text) is modelized in CSS by a box, and it is really important to understand how this box system works to master layout techniques and every little detail about CSS.

Every box has 5 characteristics: a width, a height, a padding, a border and a margin. Inspect those properties in your browser’s dev tools:

Those characteristics are different from the width, height, padding, border and margin CSS properties. What you see in the dev tools is what the box actually is, not what we ask it to be.

Let me tell it again, this is really important: for every CSS property there is a difference between the specified value in your CSS code and the value that is actually computed by the browser. Most of the time the specified and computed values will be the same but in a lot of cases the browser will override the specified value.

The box model properties will impact (or not) the box characteristics depending on the display mode.

🔗The display property

You can change the display mode with the display CSS property. We’ll see it more in depth in the next kata but for now remember that there are two main display modes: block and inline.

block

The box will extend in the line direction to fill the space available in its container. The width and height properties are respected.

inline

The width and height properties do not apply.

All elements have a default display mode. For instance, div, h1 and p are block by default while a, strong and span are inline.

<style>
.box {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

.block { display: block; }
.inline { display: inline; }
</style>

<span class="box block">Block box</span>
<span class="box inline">Inline box</span>

In the above example, something is not really intuitive: if you inspect the first box with the dev tools, we end up with a distance from border to border included of 222px. Let’s bring up the box model again:

We get 222px because: 1px from left border + 10px from left padding + 200px from width + 20px from right padding + 1px from right border = 222px. This is not intuitive because most humans will consider a box what is delimited by the borders. But fear not! There is an alternate box model.

The default box model is the content-box model. The other box model is the border-box model. In this model, the width and height characteristics are defined as content + padding + border. By setting the box-sizing property, you can change the model used.

<style>
.box {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  width: 200px;
  height: 200px;
}

.block { display: block; }
.inline { display: inline; }
</style>

<span class="box block">Block box</span>
<span class="box inline">Inline box</span>

As the border-box model is more intuitive, it is a good practice to reset it for all elements:

<style>
* {
  box-sizing: border-box;
}
.box {
  display: block;
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
}
</style>

<span class="box block">Block box</span>

🔗Help! I broke the box model

If you played a bit with the live editor, you may have noticed two issues.

<style>
.box {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  width: 200px;
  height: 200px;
}

.block { display: block; }
.inline { display: inline; }
</style>

<span class="box block">Block box</span>
<span class="box inline">Inline box</span>

No worries! We’re going to understand what happens in the next two katas:

• Why the inline box gets merged with the block box: the flow layout Kata
• Why the text gets outside the box: the overflowing content kata

🔗What I should remember

• Every element is a box
• The block and inline display modes control how width and height properties impact the box characteristics
• The border-box model is actually more intuitive