What is the CSS box model?

The CSS box model describes how every HTML element is rendered as a rectangular box consisting of four areas from inside to outside: content (the actual text or image), padding (space between the content and the border), border (a line surrounding the padding), and margin (space outside the border, separating the element from others). By default (box-sizing: content-box), the width and height properties only apply to the content area, so adding padding and border increases the total element size. With box-sizing: border-box, the width and height include padding and border, making layout calculations much more intuitive — most modern CSS resets apply border-box globally.