The Box Model
Every layout bug you will ever have starts here.
25 minDifficulty 1/5cssAI-writtenWritten by a model on 16 August 2026 and not yet read by a person. Checked automatically: schema, the pedagogical rules the hand-written material is held to, and every diagram parsed for real.
Before this
Why this exists
You set an element to `width: 200px`, add a 20px border, and it renders 40px wider than you expected. Nothing is broken — the box model defines exactly what "width" means, and by default it doesn't include the border or padding at all, which is precisely the surprise that has confused nearly every developer at least once.
The mental model
Every element is four nested rectangles, like a picture frame: content in the middle, padding around it, a border around the padding, and margin around the border pushing away from neighbours. Width and height, by default, describe only the innermost rectangle — the content — not the frame around it.
How it works
content-box vs border-box changes what width means
With the default `box-sizing: content-box`, `width: 200px` plus `padding: 20px` plus a `2px` border renders as 244px total. Switch to `box-sizing: border-box` and `width: 200px` becomes the TOTAL rendered width — padding and border are subtracted from it internally, so the content area shrinks to fit instead of the box growing.
Margins between block elements can collapse
Two vertically stacked block elements with `margin-bottom: 20px` on the first and `margin-top: 30px` on the second don't add up to 50px of gap — the larger margin wins and the smaller one collapses into it, leaving exactly 30px. This only happens for vertical margins between certain block-level siblings, never for horizontal margins or padding.
Padding and border are always inside the element's background
A `background-color` fills the content and padding areas, right up to the inside edge of the border — this is why adding padding to a coloured box makes the coloured area visibly larger without changing the content itself. Margin, by contrast, is always transparent; it's the space outside the box, not part of it.
border-box is the practical default for almost everything
Setting a global `* { box-sizing: border-box; }` makes width and height behave the way most people intuitively expect — as the total size, including padding and border — and is standard practice in nearly every modern CSS reset, because it eliminates an entire category of layout arithmetic surprises.
The mechanism
Four nested boxes, from outside in: margin, border, padding, content. `width` and `height` target the content box by default (content-box), or the border-edge box if `box-sizing: border-box` is set. Background colour paints from the border inward; margin is always invisible space outside everything.
flowchart TD M[Margin - transparent, outside] --> B[Border] B --> P[Padding] P --> C[Content - width/height apply here by default]
What people get wrong
- Setting width and padding together will make the element exactly that wide plus that padding, always.
- That's only true under the default `content-box` sizing — under `border-box`, the specified width already includes the padding and border, so the total rendered size stays exactly at the specified width. Not knowing which box-sizing mode is active is the single most common cause of unexpected element sizing in CSS layout debugging.
- Margins between two elements always add up.
- Adjacent vertical margins between block-level siblings collapse to the larger of the two, not their sum — this specific behaviour does not apply to padding, horizontal margins, or margins on flex/grid children. Expecting margins to always add leads to layouts that appear to have 'missing' spacing, when actually the smaller margin was absorbed into the larger one by design.
- A background colour on an element also colours its margin area.
- Margin is always outside the box and always transparent — background colour only ever fills up to the outer edge of the border, never beyond it. This distinction matters when debugging why a coloured box appears smaller than expected, or why clicking just outside a coloured area still doesn't register as a click on that element.
When not to use it
- You're building any new layout from scratch.
- Apply `box-sizing: border-box` globally at the top of your stylesheet — it's the near-universal convention and avoids the content-box arithmetic surprises for no real downside.
- You need consistent, predictable spacing between many sibling elements regardless of collapsing rules.
- Use `gap` on a flex or grid container (see `css-flexbox-grid`) rather than margins — gap never collapses and applies uniformly between items.
Terms
- box-sizing
- — The CSS property controlling whether width/height refer to the content box (content-box, the default) or the full box including padding and border (border-box).
- Margin collapse
- — The behaviour where adjacent vertical margins between certain block-level elements combine to the larger value instead of summing.
- Content box
- — The innermost rectangle of the box model, holding the element's actual content — text, images, or child elements.
- Border-box
- — A box-sizing mode where the specified width/height is the total size including padding and border, with the content area shrinking to accommodate them.
Can you recall it?
An element has `width: 200px`, `padding: 20px`, and a `2px` border. Under `content-box` versus `border-box`, what is the total rendered width in each case?