CSS Box Model Visualizer

About this tool

The CSS Box Model Visualizer draws an interactive diagram of the CSS box model — the layered system of content, padding, border, and margin that determines how every HTML element is sized and spaced. Type pixel values into the number fields for each side of margin, border and padding (top, right, bottom, left) and for content width and height, and the nested, color-coded boxes redraw immediately. Below the diagram a Total line adds up every layer, margin included, and shows the content size, for example Total: 200×140px (content: 120×60px) at the default values. A box-sizing menu (content-box or border-box) sets the box-sizing line in the CSS that Copy CSS puts on your clipboard; it does not change the diagram or the Total, which always treat the numbers as content-box sizes. Use it as a learning aid for CSS beginners and a quick sanity check when a component's padding and border add up to more than you expected.

Why use it

• Visual diagram shows each layer (margin/border/padding/content) in proportion, not just numbers.

• Separate top, right, bottom and left values for margin, border and padding.

• Adds up the full footprint of the box, margins included, in one Total line.

• Generates a CSS snippet you can copy directly into your stylesheet.

How to use

1. Type pixel values into the Margin, Border and Padding fields; each has separate top, right, bottom and left inputs.
2. Set the content width and height in the Content fields.
3. Watch the nested margin, border, padding and content boxes redraw as you type.
4. Read the Total line under the diagram: the sum of all layers including margin, plus the content size.
5. Choose content-box or border-box in the box-sizing menu and click Copy CSS to copy a rule with box-sizing, margin, border, border-width, padding, width and height.

When it helps

• Learning the CSS box model as a beginner frontend developer.
• Debugging why an element's total size differs from expected — usually padding and border added under content-box.
• Working out how much space a box with given margins, borders and padding will take up in a layout.
• Visualizing how adding padding or border affects overall element dimensions.

Examples

Margin 20 on all sides, border 4, padding 16, content 120×60

Total: 200×140px (content: 120×60px)

Margin 0, border 5, padding 20 on all sides, content 200×100

Total: 250×150px (content: 200×100px)

Margin 0, border 1, padding top 16, right 24, bottom 12, left 24, content 200×40, box-sizing content-box, Copy CSS

box-sizing: content-box;
margin: 0px 0px 0px 0px;
border: 1px solid; /* adjust border-style/color */
border-width: 1px 1px 1px 1px;
padding: 16px 24px 12px 24px;
width: 200px;
height: 40px;

Tips

• Use box-sizing: border-box on every element (* { box-sizing: border-box; }) to make widths and heights predictable — most modern projects do this.
• Margin can be negative; padding cannot. Negative margins are useful for overlapping elements but often signal a layout shortcut.
• Vertical margins between adjacent block elements collapse — only the larger margin is applied. The visualizer shows a single box, so its Total never reflects collapse.
• Use padding instead of margin for spacing inside a clickable element so the entire visual area receives clicks.
• outline draws outside the border without affecting layout — perfect for focus rings without shifting content.
• Inspect element in DevTools shows the computed box. Use that alongside this tool when diagnosing real-world layout bugs.

Frequently Asked Questions

Glossary

Box model

CSS specification defining how every element is rendered as a rectangular box composed of content, padding, border, and margin layers.

Content area

The innermost box, containing the element's text, image, or child elements. Width and height (in content-box) refer to this area only.

Padding

Transparent space between content and border, inside the element. Affects clickable area and visual spacing.

Border

Drawn line surrounding the padding. Has its own width, style, and color. Counts toward total element size.

Margin

Transparent space outside the border, separating one element from its siblings. Does not affect element size but does affect layout.

box-sizing: content-box

Default browser behavior. Width and height apply only to the content area; padding and border are added on top, growing total size.

box-sizing: border-box

Width and height include padding and border. Total visible size equals the declared width — far more predictable, almost universally preferred today.

Margin collapse

When two adjacent vertical margins meet (between siblings or parent/child), only the larger margin renders, not the sum.