How to use the CSS Box Model Visualizer
- 1. Enter the sizesType the width, height, padding, border and margin in pixels.
- 2. Pick box-sizingChoose content-box (the CSS default) or border-box.
- 3. See the boxGet the rendered size, the content area and the total space used.
The four layers of every box
Every element on a page is a rectangle with four layers, from the inside out: content, padding (space inside the border), border, and margin (space outside the border that pushes other elements away). Background colours fill the content and padding; margins are always transparent.
The box-sizing property decides what your width means. With content-box, the default, width is only the content, so padding and border are added on top. With border-box, width already includes padding and border, and the content shrinks to fit.
Worked example
Take width 300px, height 150px, padding 20px, border 5px and margin 10px.
- content-box: rendered width = 300 + 2×20 + 2×5 = 350px, height = 150 + 40 + 10 = 200px. Including margins, the box takes 370 × 220px of space.
- border-box: the box stays 300 × 150px, and the content area shrinks to 300 − 50 = 250 by 150 − 50 = 100px.
That is why many stylesheets start with *, *::before, *::after { box-sizing: border-box; }: a 50% width really means half, however much padding you add. Watch out for margin collapsing: when two blocks are stacked, their vertical margins can merge into the larger one instead of adding up.
Frequently asked questions
Does padding change the background area?
Yes. The background fills content and padding, up to the outer edge of the border.
Can margin be negative?
Yes. A negative margin pulls the box or its neighbours closer. Padding and border cannot be negative.
How do I see the box model in my browser?
Right-click an element, choose Inspect, and open the Computed or Layout tab in DevTools.
Is it free?
Yes, completely free. Your first result asks for a name and WhatsApp number once, and then all Uncodemy tools open straight away.