CSS Box Model Visualizer

How to use

1. 1Pick a preset (Card, Button, Input field, Hero image, or Vertical stack item) to load a sensible starting point, or start from the default values.
2. 2Choose box-sizing: content-box if width targets the content area, or border-box if width includes padding and border.
3. 3Adjust width and height. Switch between px, rem, and em with the unit toggle. Set the root font size to match your project for accurate rem and em output.
4. 4Edit padding, border width, and margin per side. Use the Link all four sides toggle on each group to keep top, right, bottom, and left in sync.
5. 5Read the live diagram for side labels and the computed-box summary for content, padding, border, and margin box sizes.
6. 6Click Copy CSS, Copy longhand, or Copy classes to put the shorthand block, the longhand block, or the Tailwind classes on your clipboard.

About this tool

CSS Box Model Visualizer is an interactive tool that draws the four CSS box areas (content, padding, border, margin) as nested rectangles and recomputes them in real time as you edit any side. It teaches and applies the same rules the browser uses, so the numbers in the panel match what DevTools would show for an element with the same declared properties. Pick content-box (the CSS default, where width targets the inner content area and padding plus border are added outside it) or border-box (the modern normalization, where width targets the border box and padding plus border are absorbed from the inside). Set width, height, the four padding sides, the four border-width sides, and the four margin sides; toggle Link all four sides per group to edit a single value that propagates to top, right, bottom, and left; switch between px, rem, and em with a configurable root font size so the rem and em outputs match your project. The diagram scales the largest dimension to fit the canvas with side labels for each non-zero padding and margin value, and the summary panel reports the computed content, padding, border, and margin box sizes plus the horizontal and vertical totals so you can confirm an outer width target. Three copyable outputs are kept in sync as you edit: a paste-ready CSS shorthand block (width, height, box-sizing, padding, border-width, border-style, margin), a longhand block with one property per side for build systems that require explicit properties or single-side overrides, and a Tailwind v3+ string with arbitrary values that round-trips any pixel or rem amount. Includes presets for common shapes (card, button, input, hero image, vertical stack item) and a warning when the declared border-box width is too small to fit the requested padding and border. Useful for learning how padding, border, margin, and box-sizing interact; planning a card or panel without trial-and-error in DevTools; converting a design system token list into ready-to-paste CSS or Tailwind classes; and double-checking whether a width includes or excludes padding in a legacy stylesheet. Everything runs locally on your device, so the values you enter here never leave your browser.

Free to use. Works in your browser. No signup, no login.