The box model says every element renders as a rectangle built from four layers, from the inside out:
Content, where the text and images sit, sized by width and height.
Padding, clear space between the content and the border.
Border, the line drawn around the padding.
Margin, transparent space outside the border that separates the box from its neighbors.
The space a box takes up is the content plus padding, border and margin on both sides. With the default box-sizing: content-box, width sets only the content, so padding and border are added on top. A box with width: 200px, padding: 20px and a 5px border renders 250px wide before its margins.
Setting box-sizing: border-box makes width include the padding and border, so the same box stays 200px wide. Margins always sit outside, and vertical margins between blocks can collapse into one gap.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
