Box Model Visualizer
An interactive tool to understand padding, border, and margin on the CSS Box Model.
What is the Box Model Visualizer?
The CSS Box Model Visualizer is a free interactive tool that shows how content, padding, border, and margin combine to form an element's total size. Drag the sliders and watch a live diagram and the computed totals update together.
Every CSS element is built from four nested layers: the content box, surrounded by padding, then a border, then a margin. The visualizer color-codes each layer and reports the total width and height with a full breakdown of how each part contributes.
It runs entirely in your browser with no signup, making it a quick way to build intuition for box-model math before writing CSS.
How to use the Box Model Visualizer
- 1Drag the Margin slider to set the space outside the border, from 0 to 50 pixels.
- 2Drag the Border slider to set the border thickness, from 0 to 20 pixels.
- 3Drag the Padding slider to set the space between content and border, from 0 to 60 pixels.
- 4Adjust the Content Width and Content Height sliders to resize the inner content box.
- 5Watch the color-coded diagram redraw as the nested layers grow and shrink.
- 6Read the Total Width and Total Height cards to see how content, padding, border, and margin add up.
What you can use it for
- Teaching or learning how the CSS box model works without writing any code.
- Predicting an element's real footprint before adding padding and margin in a layout.
- Demonstrating why an element overflows its container once padding and border are included.
- Explaining to a teammate the difference between space inside the border (padding) and outside it (margin).
- Sanity-checking box-model arithmetic when a component ends up wider or taller than expected.
Key features
- Live, color-coded diagram of content, padding, border, and margin layers.
- Five sliders for margin, border, padding, content width, and content height.
- Total width and height calculations with a per-layer breakdown.
- Reminder that box-sizing: border-box folds padding and border into the declared width and height.
Frequently asked questions
What is the CSS box model?
The CSS box model describes every element as four nested layers: the content area, the padding around it, the border around the padding, and the margin outside the border. Understanding how these layers stack is essential for controlling spacing and layout in CSS.
How is the total width of an element calculated?
With the default content-box sizing, total width equals content width plus left and right padding, plus left and right border, plus left and right margin. The visualizer shows this sum explicitly: each side is counted twice because it applies on both edges.
What is the difference between padding and margin?
Padding is the space inside an element, between its content and its border, and it shares the element's background. Margin is the space outside the border that separates the element from its neighbors and is always transparent.
How does box-sizing border-box change the box model?
With box-sizing set to border-box, the width and height you declare include padding and border, so the content box shrinks to fit instead of the element growing. Margin is still added on top. This makes element sizing more predictable, which is why many projects apply it globally.
Does margin count toward an element's width?
Margin does not change the element's own rendered box, but it does add to the total horizontal and vertical space the element occupies on the page. The visualizer includes margin in its total width and height figures for that reason.
Is the CSS box model visualizer free to use?
Yes, it is completely free with no signup required. It runs entirely in your browser, so you can experiment with the sliders as much as you like without sending any data anywhere.