Every HTML element renders as a rectangular box built from four layers, from the inside out: content (the actual text/image), padding (space inside the border), border (the visible edge), and margin (space outside the border, separating it from other elements). box-sizing: content-box (default) means width/height apply only to the content; box-sizing: border-box means width/height include padding and border too, which is usually easier to reason about.