Styling & CSS · CSS basics
Box Model
Also called: CSS box model, box-sizing, border-box
The browser treats every element as a rectangular box with four layers. From the inside out, they are content, padding, border, and margin.
In detail
Every element on the page is a box. The innermost part is the content, then a ring of padding around it, then the border, and the outermost layer is the margin. Select an element in the browser's DevTools and you'll see a diagram of these four layers with their exact values.
The most common beginner trap is width math. By default, width: 200px only counts the content. Add 20px of padding and a 1px border on each side, and the element actually takes up 242px, which breaks the layout. With box-sizing: border-box, width includes padding and border, which is more intuitive. Most projects now apply it to every element.
When the spacing between elements looks off or something is wider than its container, open DevTools and check the box model first.
Developer infoTerm ID, DOM cues, match priority
- Term ID
style-box-model- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026