The CSS box model is the foundation of layout—but also one of the most misunderstood concepts in web development.
Every element on a webpage is a rectangular box composed of:
- Content – text or media
- Padding – space between content and border
- Border – the element’s boundary
- Margin – space outside the element
Understanding the box model clarifies why elements overlap, why spacing behaves unexpectedly, and why layouts break at certain sizes. Padding increases internal spacing and affects background color. Margin controls separation between elements but never carries background styling.
Modern layouts benefit greatly from box-sizing: border-box, which makes width and height calculations intuitive and predictable.
Once the box model is fully understood, layout stops feeling like trial and error and starts feeling like engineering.
