Explain the CSS box model and the difference between content-box and border-box sizing.

Every element is drawn as four nested rectangles: the content box, then padding around it, then the border, then margin outside that. Margin is transparent space between elements and is not part of the element's own background.

box-sizing decides what width refers to:

• content-box is the default. width: 300px sets the content area alone, so 20px of padding and a 2px border on each side make the element actually occupy 344px. This is why layouts overflow unexpectedly.
• border-box makes width include padding and border. Set 300px and the element occupies 300px, with the content area shrinking to accommodate the padding.

Almost every codebase applies this reset:

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

Note: Be ready for margin collapsing as a follow-up. Adjacent vertical margins between block elements collapse to the larger of the two rather than adding up — and this does not happen in flex or grid containers, or across a border or padding.