CSS Box Model Visualizer
Every element on a web page is a rectangular box made of four layers: the content, the padding around it, the border, and the margin that separates it from other elements. This visualizer lets you change each layer and see the result straight away, drawn at real size and as a DevTools-style diagram.
Switch between content-box and border-box to see how box-sizing changes the size of the element, set each side separately, and copy the CSS when you’re done.
Live element
Box model diagram
Generated CSS
About this tool
The four layers
- Content holds the text, images or child elements. Its size is set by
widthandheight, or by what’s inside it. - Padding is space inside the border. It shows the element’s background.
- Border surrounds the padding. It has a width, a style and a color.
- Margin is transparent space outside the border that pushes other elements away.
content-box vs border-box
With the default box-sizing: content-box, width sets the content only, and padding and border are added on top. A 200px box with 20px padding and a 4px border is 248px wide.
With box-sizing: border-box, width includes padding and border, so the box stays 200px wide and the content shrinks to 152px. Most sites set *, *::before, *::after { box-sizing: border-box; } because sizes are easier to predict.
Reading the diagram
The diagram works like the box model panel in your browser’s DevTools: margin on the outside, then border, padding and the content size in the middle. The number on each side is that side’s value in pixels. Hover over a layer to highlight it in the live element too.
Margins in real layouts
The vertical margins of block elements that touch can collapse: two 20px margins between stacked paragraphs make a 20px gap, not 40px. Margins don’t collapse inside flex or grid containers, or for floats and inline-block elements. Horizontal margins never collapse.
Frequently Asked Questions
What is the CSS box model?
It’s how browsers lay out every element: as a rectangle made of the content, then padding, then a border, then a margin. The element’s size on the page is the content plus padding and border, and the margin adds space around it. Understanding it explains most spacing and sizing surprises in CSS.
What is the difference between content-box and border-box?
With content-box, the default, width and height set the content area and padding and border are added on top. With border-box, width and height include padding and border, so the element is exactly the size you set and the content area shrinks to fit. Switch between them in the tool to see the difference.
How do I calculate the total width of an element?
With content-box: width + left and right padding + left and right border. Add the left and right margins to get the space the element takes up. With border-box, the element’s width is simply the width value, plus margins for the space taken up. The tool shows all three sizes and the sum for the current settings.
What is the difference between padding and margin?
Padding is inside the border and shows the element’s background, so it makes the element bigger. Margin is outside the border, is always transparent, and creates space between the element and its neighbours. Clicks and hovers on the padding count as clicks on the element; on the margin they don’t.
Why does my element look bigger than its width?
Because with the default box-sizing: content-box, padding and border are added to the width. A 300px wide element with 20px padding and a 1px border is 342px wide on the page. Setting box-sizing: border-box keeps it at 300px.
What happens if padding and border are bigger than the width with border-box?
The content area can’t be smaller than zero, so the element grows to fit the padding and border, and becomes wider than the width you set. The tool shows a warning when this happens.
What is margin collapsing?
When the vertical margins of two block elements touch, the larger margin is used instead of adding them together. A 20px bottom margin above a 30px top margin makes a 30px gap. It doesn’t happen in flex and grid layouts, for floats or inline-block elements, or with horizontal margins.
Can I set each side separately?
Yes. Switch off Same on all sides for padding, border width or margin to set the top, right, bottom and left values on their own. The generated CSS uses the shortest shorthand that matches, such as padding: 10px 20px.