cssdojo(re)learn CSS, the right way

The Box Model


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.

A box showing how width, height, padding, border and margin are related to each other
Schema of the Box model (source: MDN)

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:

The box model in the Firefox 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.

The box will extend in the line direction to fill the space available in its container. The width and height properties are respected.
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.

Task: try to set the width and height of both boxes to 200px

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:

A box showing how width, height, padding, border and margin are related to each other
Schema of the Box model (source: MDN)

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.

Task: change the first box so that it is 200px wide - border to border

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

Help! I broke the box model

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

Task: set the block width to 10px and remove the margins

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

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