Box Model

Summary

Every element is a box made of content, padding, border and margin — understanding how these stack and collapse is essential for layout debugging. Many sizing and spacing bugs become straightforward once you can calculate an element's rendered dimensions and identify whether padding, border, margin, or `box-sizing` is responsible.

• 1Toggle `box-sizing: border-box` vs `content-box` and see the size difference. Validate your understanding by applying it in a small practical example.
• 2Inspect the box model diagram in DevTools for any element. Validate your understanding by applying it in a small practical example.
• 3Learn margin collapsing between adjacent vertical margins.