What Is the Box Model Visualizer?
The Box Model Visualizer is an interactive tool that illustrates the CSS box model — content, padding, border, and margin — in real time. Adjust values and see exactly how each property affects element sizing.
Why Use This Tool?
The CSS box model is one of the most fundamental concepts in web layout, but it trips up developers constantly. Misunderstanding how padding and border affect total element width (especially with different box-sizing values) causes countless layout bugs. This tool makes the relationships visible and intuitive.
How to Use This Box Model Visualizer
- Adjust margin values — Use the Margin slider (0 to 50 px). It sets one value for all four sides, the same as the margin shorthand with a single value. Margin creates space outside the element's border.
- Set border width and style — Set the border thickness (0 to 10 px), pick one of the eight border styles (solid, dashed, dotted, double, groove, ridge, inset, outset) and choose its colour. The border sits between margin and padding.
- Control padding — Adjust padding values to set the space between the border and the content area. Padding pushes content inward.
- Toggle box-sizing — Switch between
content-box (default) and border-box to see how each model calculates total element size.
- Read the computed dimensions — The visualizer shows the total computed width and height, breaking down how margin, border, and padding contribute to the final size.
Tips and Best Practices
- → Always use
box-sizing: border-box. With border-box, width and height include padding and border — making layouts far more predictable. Apply it globally with *, *::before, *::after { box-sizing: border-box; }.
- → Use margin for spacing between elements. Margin collapses vertically (adjacent margins merge into the larger value), which is intentional CSS behavior. Use padding when you need guaranteed internal spacing.
- → Margin auto centers block elements. Setting
margin: 0 auto on a block element with a defined width centers it horizontally within its parent.
- → Use DevTools to inspect the box model live. Every browser's DevTools has a box model diagram that shows computed margin, border, padding, and content dimensions for any selected element.
Frequently Asked Questions
What is box-sizing: border-box?
With border-box, padding and border are included inside the element's declared width/height. With the default content-box, they're added on top, making the total element larger than specified. Most modern CSS resets use border-box globally.
Why does my element overflow its container?
Usually because padding or border is adding to the width beyond what the container can hold. Switch to box-sizing: border-box to include padding and border within the declared dimensions.
Does margin count toward element size?
No. Margin is space outside the element. It doesn't affect the element's own dimensions but does affect how much space it takes up in the layout.
What is the CSS box model?+
The CSS box model describes how every HTML element is rendered as a rectangular box with four layers: content (the actual text or image), padding (space between content and border), border (the visible edge), and margin (space outside the border separating the element from neighbors).
What is the difference between content-box and border-box?+
In content-box (the default), width and height only apply to the content area — padding and border are added on top, making the total element larger. In border-box, width and height include padding and border, so the element stays at the size you set. Most modern CSS resets use border-box globally.
Why do vertical margins collapse?+
CSS margin collapsing is a designed behavior where adjacent vertical margins merge into a single margin equal to the larger of the two. This prevents doubled spacing between elements. Horizontal margins never collapse, and flexbox/grid children don't collapse either.
Does the visualizer support box-sizing border-box?+
Yes. A box-sizing switch sits above the CSS output. With content-box (the browser default), width and height size the content area, and padding and border are added on top. With border-box (what most CSS resets set), width and height size the border edge, and padding and border come out of the content area; if they add up to more than the width, the content shrinks to 0 and the box grows to fit them. The diagram, the copied CSS and the size readout (content, border box, and border box plus margin) all follow the switch. Checked Oct 12, 2026: on 48 combinations the readout matched the sizes Chromium gives an element styled with the copied CSS.
What happens when margins collapse?+
Vertical margins between adjacent block elements collapse to the larger of the two rather than summing (when both are positive). The visualizer draws a single box, so it does not demonstrate collapsing. Collapsing only happens in normal block flow; it does not happen inside flex or grid containers, where each child controls its own gap. This is why modern layouts use gap properties instead of margins.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service