.box {
box-sizing: content-box;
width: 240px;
height: 120px;
padding: 16px;
border: 4px solid;
margin: 24px;
}About CSS Box Model Visualizer & Calculator
The CSS box model is why an element is so often wider or taller than you expected. Every box is four nested layers — content, padding, border, and margin — and whether the declared width includes padding and border depends entirely on the `box-sizing` property. This box model visualizer makes that explicit: enter your values and see a scaled, color-coded, devtools-style diagram of all four layers.
It computes the rendered content size and the total space the box occupies, for both `content-box` and `border-box`, and gives you the equivalent CSS rule to copy. It's the fastest way to reason about a layout bug without opening the browser inspector.
Everything runs entirely in your browser — no values are uploaded, and it works offline.
Features
- Nested, color-coded box-model diagram (margin → border → padding → content)
- Per-side padding, border, and margin inputs
- content-box vs border-box totals computed live
- Copy the equivalent CSS rule with one click; fully offline
How to use
- Set the content width and height, then the per-side padding, border, and margin.
- Toggle box-sizing between content-box and border-box to see how totals change.
- Read the scaled diagram and the computed total width × height below it.
- Copy the generated CSS rule to drop straight into your stylesheet.
Frequently asked questions
What is the difference between content-box and border-box?
With content-box (the default), width and height set the content area only — padding and border are added on top, making the element larger. With border-box, width and height include padding and border, so the content shrinks to fit and the element stays the size you declared.
Does margin count toward an element’s size?
No. Margin is space outside the border that pushes other elements away; it is never part of the box’s painted size. This tool shows it as the outermost layer and includes it in the total space the box occupies, but not in the content or border-box size.
Why is my element wider than the width I set?
Almost always because box-sizing is content-box and you added padding or a border — both add to the declared width. Setting box-sizing: border-box makes the declared width the final rendered width instead.
Is the diagram drawn to scale?
The layers are arranged exactly like Chrome DevTools — margin around border around padding around content — and each side is labeled with its pixel value, so you can reason about the relationships at a glance.
Related tools
Everything runs locally in your browser — your input is never uploaded.