Box Model Visualizer

This tool renders the CSS box model as a nested colored diagram (margin, border, padding, content) and updates both the visual and generated CSS as you change per-side values. Each of margin/border/padding has independent top/right/bottom/left inputs in pixels, and the content box has width and height. Clicking a layer card highlights it with a ring, and the total rendered size is computed and displayed.

1. Edit Margin, Border, and Padding values per side (in px) in their grouped cards. 2. Set Content width and height. 3. Click any layer card to highlight that layer in the diagram. 4. The nested diagram shows total outer dimensions, and the generated CSS box updates live. 5. Click Copy on the CSS Code card to copy the generated declarations.

Output uses the `top right bottom left` shorthand for `margin`, `border-width` (with `border-style: solid;`), and `padding`, plus explicit `width` and `height`, and a comment showing the total outer size. Total width = left margin + left border + left padding + content width + right padding + right border + right margin (height analogously). The diagram is scaled to fit, with a minimum content size of 60x30 px so tiny boxes remain visible.