By Rahul — Google Frontend Engineer
Every Element is a Box
Every HTML element is a rectangular box. The box model defines how the element's size is calculated from four layers: content, padding, border, and margin.
┌─────────────── margin ───────────────┐
│ ┌─────────── border ───────────┐ │
│ │ ┌─────── padding ──────┐ │ │
│ │ │ ┌── content ───┐ │ │ │
│ │ │ │ Hello │ │ │ │
│ │ │ └───────────────┘ │ │ │
│ │ └───────────────────────┘ │ │
│ └──────────────────────────────┘ │
└──────────────────────────────────────┘content-box vs border-box
This is the most important thing to understand about the box model.
content-box (default)
.box {
box-sizing: content-box; /* default */
width: 200px;
padding: 20px;
border: 2px solid black;
}
/* Actual rendered width: 200 + 20 + 20 + 2 + 2 = 244px */
/* This is confusing and causes layout bugs */border-box (what you should use)
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid black;
}
/* Actual rendered width: 200px (padding and border included) */
/* Content area: 200 - 40 - 4 = 156px */The Universal Reset
/* Every modern CSS reset includes this */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width means total width. Always. */Margin Collapse
Vertical margins collapse — they do not add up. This confuses everyone.
.top { margin-bottom: 30px; }
.bottom { margin-top: 20px; }
/* Gap between them: 30px (not 50px!) */
/* The larger margin wins */Margins do NOT collapse when:
- Elements are flex or grid children
- Elements are floated
- Elements have overflow other than visible
- Horizontal margins (left/right never collapse)
Common Production Issues
100% Width Plus Padding
/* Without border-box, this overflows */
.sidebar {
width: 100%;
padding: 20px; /* Adds 40px to the 100% */
}
/* With border-box, it works perfectly */Outline vs Border
outline does NOT affect the box model. It does not take space. border does. Use outline for focus indicators that should not shift layout:
button:focus {
outline: 2px solid blue; /* No layout shift */
}
button:focus {
border: 2px solid blue; /* Layout shifts! */
}Inspecting the Box Model
Chrome DevTools shows the box model visually when you select an element. The colored overlay shows content (blue), padding (green), border (yellow), and margin (orange). Use this constantly when debugging layout.
Summary
The box model has four layers: content, padding, border, margin. Always use box-sizing: border-box. Vertical margins collapse. Understanding this prevents 90% of CSS layout bugs.