CSS box model visualizer
Change width, height, padding, border and margin — the diagram shows every layer of the box and the calculation below shows how wide the element really is. Ready-made CSS appears under the preview.
.box {
box-sizing: content-box;
width: 200px;
height: 120px;
padding: 20px;
border: 5px solid;
margin: 20px;
}How to use it
- Set
widthandheight, then switchbox-sizingbetweencontent-boxandborder-boxand watch how the rendered size changes. - Adjust
padding,borderandmargin. Untick “Link all sides” to set top, right, bottom and left separately. - Read the calculation under the diagram: it shows how the final width and height are added up.
- Click “Copy” and paste the
.boxrule into your stylesheet.
How it works
Four layers of every box
Every element is a rectangle made of four layers, from the inside out: content (text and child elements), padding (space between the content and the border), border (the line around the element) and margin (transparent space between this element and its neighbors). The background is painted under the content, padding and border, but never under the margin.
content-box vs border-box
By default box-sizing: content-box applies: width and height set only the content, and padding and border are added on top. So width: 200px with padding: 20px and border: 5px gives a box 250px wide. With box-sizing: border-box the same width includes padding and border, and the content shrinks instead. That is why most projects start with this reset:
*, *::before, *::after {
box-sizing: border-box;
}Shorthand: 1, 2, 3 or 4 values
padding, margin and border-width accept up to four values in clockwise order: top, right, bottom, left. One value means all sides, two values mean vertical and horizontal, three values mean top, horizontal and bottom. The generator writes the shortest form of 1, 2 or 4 values.
margin: 10px 20px 30px 40px; /* top right bottom left */
margin: 10px 20px; /* vertical horizontal */Margin collapsing
Vertical margins of neighboring blocks collapse: if one block has margin-bottom: 30px and the next has margin-top: 20px, the gap is 30px (the larger one), not 50px. A parent's margin can also merge with the margin of its first or last child when nothing separates them (no padding, border or content). Horizontal margins never collapse, and neither do the margins of flex and grid items.
.a { margin-bottom: 30px; }
.b { margin-top: 20px; }
/* gap between .a and .b = 30px */FAQ
What is the difference between content-box and border-box?
In content-box the width is the width of the content only, so padding and border make the element wider. In border-box the width is the width of the whole box up to the outer edge of the border, so the element keeps its size however much padding you add.
Why is my element wider than the width I set?
Most likely box-sizing is content-box, so padding and border are added to the width. A block with width: 100% and padding: 20px then sticks out of its parent by 40px. Set box-sizing: border-box to fix it.
Do margins add up?
Not always. Vertical margins of adjacent blocks collapse into the larger one, while horizontal margins and the margins of flex or grid items do add up. The diagram shows the margin box of a single element, so it does not show collapsing.
Padding or margin — which one should I use?
Use padding for space inside the element: it stays under the background and inside the clickable area. Use margin for space between elements: it is always transparent. Percentage values of both are calculated from the width of the containing block.
