12. CSS Box Model

What you will learn

• The four layers of every element’s box
• How to calculate an element’s real size
• What box-sizing: border-box does and why it is so popular

Everything is a box

The browser treats every HTML element as a rectangular box. Each box has four layers, from the inside out:

1. Content: the text or image itself.
2. Padding: space around the content, inside the border.
3. Border: a line around the padding.
4. Margin: space outside the border, separating the box from its neighbours.

Total size, the default way

With the default setting (box-sizing: content-box), width and height apply to the content only. The total space used is:

total width = width + left padding + right padding + left border + right border (+ left and right margin)

<style>
  .box {
    width: 300px;
    padding: 20px;
    border: 5px solid #082b59;
    margin: 10px;
    background-color: #cfe6ff;
  }
</style>

<div class="box">Content box</div>

You asked for 300px but the box is 350px wide. That surprise is why box-sizing exists.

border-box: the friendlier way

With box-sizing: border-box, the width and height include the padding and border. A width: 300px box is then exactly 300px wide, and the browser shrinks the content area to fit.

<style>
  .box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid #082b59;
    background-color: #cfe6ff;
  }
</style>

<div class="box">Border box: exactly 300px wide</div>

The common global reset

Most developers apply border-box to everything at the top of their stylesheet:

*, *::before, *::after {
  box-sizing: border-box;
}

After this, sizes behave the way you would expect: you set the width, and padding and borders no longer make the box bigger.

Inspect the box in your browser

1. Open any page and press F12.
2. Click the element picker, then click an element.
3. Find the Computed or Layout tab. It draws the box model with the real numbers for margin, border, padding, and content.

Common mistakes

• Setting width: 100% plus padding on a content-box element, causing sideways scrolling.
• Forgetting that borders add to the size.
• Confusing margin (outside) with padding (inside).
• Not using border-box and fighting with sizes.

<style>
  .box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid navy;
    background-color: #eaf5ff;
  }
</style>
<div class="box">How wide am I?</div>

Summary

• Every element is a box: content, padding, border, margin.
• By default, padding and border add to the width.
• box-sizing: border-box makes sizes predictable, so use it everywhere.