FrontendBeginner
Box Model
PronunciationBOKS MOD-el
Definition
The Box Model is a fundamental CSS concept where every HTML element is treated as a rectangular box consisting of content, padding, borders, and margins. It defines how these layers interact to determine the total size and layout of an element.
Where you hear it
Commonly discussed when styling layouts, debugging spacing issues, or learning the basics of CSS.
Examples
The browser calculates the total width of an element by adding its content, padding, and border.
You can change the default behavior of the box model using the
box-sizingproperty.
Common mistake
Many beginners forget that the margin is outside the border and does not contribute to the element's background color or size calculation, often leading to unexpected spacing issues.