The box model, refreshed

Every HTML element is a rectangle. The rectangle has four layers: the content itself, padding around the content, a border around the padding, and margin around the border. This is the box model. Most CSS bugs come from not knowing exactly which layer you are adjusting.

The four layers of a box

Content at the center, surrounded by padding, then border, then margin.

style.css

css

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

The one rule every stylesheet should start with.

Without box-sizing: border-box, width: 300px means the content is 300 pixels and padding plus border is added on top. So a div with 20px padding and a 1px border is actually 342 pixels wide. border-box flips this: width: 300px now includes padding and border. Your mental math matches what you see. Put this rule at the top of every stylesheet.

Quiz: Quiz

Loading practice…