Free CSS Box Model Visualizer

How It Works

1. Enter box model values: Set margin, border, padding, and content dimensions using the input fields or interactive sliders.
2. Explore the visualization: The classic nested box diagram updates in real time — margin (orange), border (yellow), padding (green), and content (blue) are all clearly labeled.
3. Copy the CSS: Click Copy CSS to get the complete box model properties for the configured element.

Why Use CSS Box Model Visualizer?

The CSS box model is one of the most fundamental concepts in web layout — and one of the most common sources of layout bugs, especially when mixing box-sizing values, margin collapsing, and border sizing. This interactive visualizer makes the box model concrete and tangible: you adjust values and immediately see how margin, border, and padding stack around the content area. Essential for learning, debugging, and teaching CSS.

Features

• Interactive diagram: The classic nested box model view with color-coded layers (margin, border, padding, content).
• box-sizing toggle: Switch between content-box and border-box to see how each mode affects total dimensions.
• Individual sides: Set top/right/bottom/left values independently for margin, padding, and border.
• Total size calculation: Displays the computed total width and height of the element.
• CSS output: Generates ready-to-use CSS for the configured box model.

Frequently Asked Questions

What is the difference between content-box and border-box?

With content-box (the default), width and height apply only to the content area — padding and border add to the total element size. With border-box, width and height include padding and border, making it easier to predict element sizes. Most modern CSS resets apply box-sizing: border-box to all elements.

What is margin collapsing?

When two vertical margins touch (between adjacent block elements or parent and first/last child), they collapse into a single margin equal to the larger of the two values. This does not happen with flex or grid children, or with elements that have padding or borders.

How do I remove extra spacing below inline elements?

Inline elements (like <img>) have a small gap below them caused by line-height baseline alignment. Fix it by setting display: block on the element, or vertical-align: bottom, or font-size: 0 on the parent.