The box model, or CSS box model, is the rule set by which browsers represent every rendered element as a rectangular box made of four nested areas: content, padding, border and margin. In CSS, it determines how large an element is, how much space surrounds it and how it interacts with neighboring elements in layout.
Every layout technique, from normal block flow to Flexbox and CSS grid, works with these boxes. Understanding the box model explains why an element with width 300px can occupy 342 pixels, why vertical margins sometimes collapse into one, and why the box-sizing property is set globally in almost every modern stylesheet.
The four areas of the box
Each box is built from the inside out. The content area holds text, images or child boxes; padding adds space inside the border; the border draws a line around the padding; and the margin adds transparent space outside the border that separates the element from others.
| Area | Controlled by | Takes background | Notes |
|---|---|---|---|
| Content | width, height, min and max values | Yes | Holds text and child elements |
| Padding | padding and its longhands | Yes | Cannot be negative |
| Border | border-width, border-style, border-color | Yes, drawn beneath the border | No width without a style |
| Margin | margin and its longhands | No, always transparent | Can be negative and can collapse |
Percentages in padding and margin are resolved against the width of the containing block, even for top and bottom values. This often surprises developers and was historically used to create fixed aspect ratio boxes, a job now handled by the aspect-ratio property.
Box sizing and how width is calculated
The box-sizing property decides which areas the width and height values describe. Under the default content-box, width applies only to the content, and padding and border are added on top. Under border-box, width includes content, padding and border, so the declared width is the visible width.
The table shows the result for an element with width 300px, padding 20px and a 1px border on each side.
| Box-sizing value | Content width | Rendered border-box width |
|---|---|---|
| content-box (default) | 300px | 342px |
| border-box | 258px | 300px |
Because border-box makes sizes predictable, most projects apply it to every element and pseudo-element with a short global rule at the start of the stylesheet. Frameworks such as Tailwind CSS include this reset by default. Margins are never included in either model; they always add outside the declared size.
Display types and margin collapsing
The box model behaves differently depending on the element’s outer display type. Block boxes respect width, height and all margins, while inline boxes ignore width and height and apply vertical padding and borders visually without pushing surrounding lines apart.
| Display type | Width and height | Vertical margins | Typical elements |
|---|---|---|---|
| block | Respected; width fills container by default | Applied, may collapse | Paragraphs, sections, headings |
| inline | Ignored | Ignored for layout | Links, emphasis, spans |
| inline-block | Respected | Applied, never collapse | Badges, buttons in text |
| flex or grid item | Respected, adjusted by the layout algorithm | Applied, never collapse | Children of flex and grid containers |
Margin collapsing is the rule that adjacent vertical margins of block boxes in normal flow combine into a single margin equal to the larger value, not their sum. A 24px bottom margin followed by a 16px top margin produces 24px of space, not 40px. Collapsing also occurs between a parent and its first or last child when no padding, border or content separates them.
Collapsing is prevented by padding or a border on the parent, by creating a new block formatting context with display: flow-root, or by using Flexbox or CSS grid, where margins never collapse. Many teams avoid the issue by using the gap property for spacing between items.
Inspecting and controlling boxes in practice
Browser developer tools display a box model diagram for the selected element, showing computed content size, padding, border and margin. This is the fastest way to diagnose unexpected spacing or overflow.
| Symptom | Likely cause | Fix |
|---|---|---|
| Element wider than its container | content-box with padding added | Apply border-box sizing |
| Gap between sections smaller than expected | Margin collapsing | Use padding, flow-root or gap |
| Space leaks outside a parent | Child margin collapsing through parent | Add padding or a new formatting context |
| Padding on a link does not push lines apart | Inline box behavior | Use inline-block or block display |
| Horizontal scrollbar appears | Width 100 percent plus padding or margin | Border-box sizing, remove fixed widths |
Modern CSS also offers logical properties such as margin-inline and padding-block, which follow the writing direction instead of physical sides. They matter for right-to-left and vertical languages and are increasingly preferred in design systems.
Common misconceptions
Several persistent misunderstandings about the box model cause layout bugs that are hard to trace.
- Outlines and box shadows take up space: they do not; neither affects layout or box size.
- Margins are part of the element’s width: margins are always outside, under both sizing models.
- Height 100 percent always fills the parent: it requires a parent with a definite height.
- Negative padding is allowed: only margins accept negative values.
A final subtlety concerns overflow. When content is larger than the content area, it spills out visibly by default instead of enlarging a box with a fixed height. The overflow property decides whether excess content is shown, clipped or scrollable, and setting min-height instead of height usually lets the box grow with its content.
In plain words
Every item on a web page sits in an invisible rectangular box. Think of a framed picture on a wall. The picture is the content, the mat around it is the padding, the frame is the border, and the empty wall space kept clear around the frame is the margin.
The box model is the set of rules for measuring these layers. Knowing it explains why something ends up bigger than planned, or why two items sit closer together than expected.
A real-world example
A developer builds a three-column card layout. Each card is set to width 33.33 percent with 16px padding and a 1px border. The third card unexpectedly drops to a new row, because under the default content-box model each card is 34 pixels wider than a third of the container.
Using the box model panel in developer tools, the developer sees the extra padding and border added to the width. Applying box-sizing: border-box globally fixes the row. Later, the vertical spacing between cards and the heading above appears smaller than designed because of margin collapsing; switching the container to CSS grid with a 24px gap makes the spacing exact and consistent.