CSS Box Model Table
| Layer | What it is | Field note |
|---|---|---|
content | The element's actual content box | Sized by width/height (until box-sizing changes the deal) |
padding | Inside the border - same background | Pushes content away from the border; part of the visible box |
border | The line around padding | Adds to outer size unless box-sizing: border-box |
margin | Outside the border - transparent | Pushes NEIGHBORS away; vertical margins between siblings collapse |
box-sizing: content-box | Default: width = content only | Padding and border ADD on top - the 300px-that-renders-360 surprise |
box-sizing: border-box | width = content + padding + border | The universal reset (* { box-sizing: border-box }) - what you intuit |
margin collapsing | Adjacent vertical margins merge | Larger wins: 30px below + 20px above next = 30px gap, not 50px |
Every element on a page is a box made of four nested layers: the content, the padding around it, the border around that, and the margin pushing neighbors away. The table below walks the layers outward with the rule each one hides - and the two facts that explain most sizing confusion in CSS.
Bottom line: by default, width describes ONLY the content - padding and border stack on top, so width: 100% plus any padding overflows its parent. The universal reset (* { box-sizing: border-box; }) changes the deal so width means the visible box, which is what everyone intuitively expects. Every modern stylesheet starts with that one line, and DevTools' computed box diagram is the ground truth when the numbers still disagree.
The honest part: vertical margins between adjacent siblings collapse - the larger margin wins and the smaller disappears. A 30px margin-bottom followed by a 20px margin-top produces a 30px gap, not 50px. This is not a bug; it is the spec - margins exist to create rhythm between blocks, and collapsing keeps 20 paragraphs from accumulating 40px gaps. Horizontal margins never collapse, which is why the rule feels asymmetric until you see its purpose.
How to use
- Read the layers inward-out in DevTools: the computed panel draws content, padding, border and margin as nested rectangles with the live numbers.
- Decide box-sizing before writing sizes - border-box makes width mean the visible box and removes the arithmetic.
- Predict gaps with collapsing in mind: between siblings the larger vertical margin wins; padding never collapses (use it when the gap must add).
Frequently asked questions
What does box-sizing: border-box actually change?
It changes what width measures. With the default content-box, width sizes the content and padding plus border stack outside - a 300px-wide element with 20px padding and 2px borders really occupies 344px. With border-box, width is the visible box: the browser subtracts padding and border from your width and gives the content what remains. Layouts stop overflowing for no apparent reason, which is why border-box-on-everything is the first line of most modern stylesheets.
Why do my two margins add up to less than their sum?
Margin collapsing: adjacent vertical margins merge into one, and the larger wins. A paragraph with margin-bottom: 30px followed by a heading with margin-top: 20px sits 30px away, not 50px. The same rule absorbs a parent's margin against its first child's under classic (non-flex, non-grid) layout. Flex and grid containers never collapse margins - one more reason modern layout feels different from the flow era.
Do padding and margin ever do the same job?
They look interchangeable until background and interaction enter. Padding is INSIDE the border: it takes the element's background color, grows the clickable or readable area, and participates in the visible box. Margin is OUTSIDE: always transparent, it moves neighbors, and clicks pass through it. A button needs padding (its label breathes inside its background); two buttons need margin (they must not touch). Choosing by which side of the border the space belongs on decides correctly every time.
Why does my width: 100% element overflow its parent?
Content-box arithmetic: width: 100% sizes the content to the parent's content width, and any padding or border then extends BEYOND it - the element is 100% plus everything else. With border-box the same declaration fits exactly, because 100% now includes the padding and border. The overflow disappears without touching the padding, which is why the reset is the standard first line rather than per-element width arithmetic.