What is the box model, and what does box-sizing: border-box change?

Every element is content → padding → border → margin.

• content-box (default): width covers only the content, padding and border are added → a declared 200px renders 240px wide.
• border-box: width includes padding + border → layout math gets far simpler.

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

Margin sits outside the box and is never counted by width in either mode.