CSS Box Model Visualizer
Free online CSS box model visualizer. Drag margin, border, padding, and content to see the layers change in real time, and finally understand the difference between content-box and border-box.
CSS Box Model Visualizer
Free online CSS box model visualizer. Drag margin, border, padding, and content to see the layers change in real time, and finally understand the difference between content-box and border-box.
About the CSS box model
Every element is four nested layers
From the inside out, an element is content, then padding, then border, then margin. Content holds the text or child elements; padding is the space inside the border; border wraps the padding; margin pushes neighbors away. This tool draws all four layers so you can see how each property adds to an element's footprint.
content-box vs border-box
With content-box (the default), width sets the content only, so padding and border are added on top and the element ends up wider than the width you set. With border-box, width means the border-box, so padding and border are subtracted from the inside and the content shrinks. Toggle the two modes here to watch the same width produce two different footprints.
FAQ
Common questions and answers about this topic.
What is the CSS box model?
It is how the browser sizes every element: as four nested layers — content, padding, border, and margin. Understanding it explains almost every layout surprise.
I set width but my element is wider. Why?
In the default content-box mode, padding and border are added outside the width. Switch to border-box to make width include padding and border, or use this tool to see the exact numbers.
Is my data sent to any server?
No. All box model calculations run entirely in your browser, and nothing you enter leaves your device.