CSS Box Model Calculator
Calculate content, padding, border, margin and rendered CSS box sizes.
Overview
The CSS Box Model Calculator takes a content width and height plus per-side padding, border, and margin values, and shows how the browser renders the box under both box-sizing: content-box and box-sizing: border-box. It surfaces the rendered outer width, the actual paintable area, and the total space the element occupies including margin.
Front-end developers debugging layout overflow, learning how box-sizing border-box works, or trying to understand why my element is wider than its parent will find it quicker than opening DevTools and clicking each line. Useful while building responsive grids where rounding errors and unexpected padding cause horizontal scrollbars.
How it works
Per CSS 2.1, a box has four concentric rectangles: content, padding, border, and margin. The default box-sizing: content-box makes width describe only the content area, so padding and border add to the rendered size. box-sizing: border-box makes width describe the border-edge, so padding and border subtract from the content area instead.
The calculator computes both rectangles for the supplied numbers and reports the outer dimensions (the size the parent flexbox or grid actually allocates) and the margin box (which collapses with adjacent vertical margins per spec).
Examples
- Content 200px width, padding 16px, border 1px, margin 8px under
content-box→ rendered width 234px, margin box 250px. - Same numbers under
border-box→ rendered width 200px, content area shrinks to 166px. - A horizontal scrollbar appears when child border-box width is 100% with a 1px border — explained by content vs border distinction.
- Asymmetric margins (
8px 16px 8px 16px) show how horizontal margin doubles the outer footprint.
FAQ
Which box-sizing should I use?
border-box for almost everything. It is the convention in modern CSS resets because it removes a class of subtle layout bugs.
Do vertical margins really collapse?
Yes, adjacent vertical margins between block-level siblings collapse to the larger of the two. Horizontal margins never collapse.
Why does my element overflow with width: 100%?
Under content-box, any padding or border adds to the 100% and pushes the element outside its parent. Switch to border-box or use width: calc(100% - 2 * var(--padding)).
Where does outline fit in?
Outline is drawn outside the border and does not affect layout — it does not count toward any of the four boxes.