Skip to content
Optimal Lab

Frontend · interactive

The CSS box model

Every element is a box: content, then padding, then border, then margin. With the default box-sizing, width: 200px sets only the content, so padding and border make the box wider. border-box makes width mean what you'd expect. This box is rendered live.

.card {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 4px solid;
  margin: 16px;
}
200px

■ content · ■ padding · ▬ border · ■ margin

Content
200px
Visible box
248px
Space taken
280px

content-box: 200 content + 40 padding + 8 border = 248px wide. Two of these won't fit in a 400px row.

box-sizing

  1. 1

  2. 2

    The historical default: the declared width is only the content.

    Source of many overflow bugs.

  3. 3

  4. 4

In production

Tools and technologies

Every element on every page is a box.

Not tied to one language — use these names when you search docs or design a system.