CSS Box Model Visualizer
Compare content-box and border-box using a diagram at actual CSS pixel size. Large boxes remain scrollable, and zero content dimensions remain zero.
CSS Box Model Visualizer
Diagram uses actual CSS pixels. Scroll to see large boxes. Width and height: 1–1,200; uniform spacing: 0–100 px.
- Margin
- Border thickness
- Padding
- Content size
A QUICK WALKTHROUGH
How to use this tool
- Set width and height from 1 to 1,200 px and uniform margin, border and padding from 0 to 100 px.
- Choose content-box or border-box and review the layers and calculated dimensions.
- Copy the CSS or reset the values. Empty or invalid values clear the result and disable copying.
Size equations
content-box: content = declared; rendered = declared + 2 × (padding + border). border-box: rendered = max(declared, 2 × (padding + border)); content = max(0, declared − 2 × (padding + border)). Both: outer = rendered + 2 × margin. The formula applies to width and height separately.
Minimum footprint and limits
All values must be nonempty and finite within the listed ranges. If padding and border exceed the declared border-box dimension, the content dimension becomes zero and the rendered dimension is their minimum footprint. Margin is outside the element.
Diagram scale
The diagram uses one CSS pixel per calculated pixel, with no fit-to-window scaling. Its scrollable viewport is 360 CSS pixels high; scroll horizontally or vertically to inspect large boxes. Layers have explicit content-box sizing, without extra padding or minimum content size. Colors are explained by the legend.
GOOD TO KNOW
Common questions
Is the diagram scaled to fit?
No. The diagram uses actual CSS pixels and scrolls when larger than the viewport. The reported dimensions are unscaled calculated CSS values.
Does margin make the element larger?
It adds outer space but does not increase the rendered element size. This tool models uniform spacing only and does not model margin collapse or intrinsic content.