juniorCSS
What is the CSS Box Model?
Updated Apr 28, 2026
Short answer
The CSS box model encapsulates HTML elements into boxes consisting of margins, borders, padding, and the actual content.
Deep explanation
Every element in web design is a rectangular box. The box model dictates how these boxes interact. The 'content' is where text and images appear. 'Padding' clears an area around the content. 'Border' goes around the padding. 'Margin' clears an area outside the border. Understanding this is crucial for layout and alignment.
Real-world example
Calculating the total width of a button or card component on a webpage.
Common mistakes
- Forgetting that padding and borders add to the total width of an element unless box-sizing: border-box is used.
Follow-up questions
- What does box-sizing: border-box do?