🎨
CSS Box Model Visualizer
css · box-model · layout
All:
Top
Right
Bottom
Left
All:
Top
Right
Bottom
Left
All:
Top
Right
Bottom
Left
margin
content
Total W: 284px
Total H: 120px
Content W: 200px
Content H: 60px
.element {
width: 200px;
height: 60px;
box-sizing: content-box;
margin: 16px 24px 16px 24px;
border: 2px solid #6366f1;
padding: 12px 16px 12px 16px;
}How to use
- 1
Set width, height and box-sizing.
- 2
Adjust margin, border and padding.
- 3
Copy the generated CSS.
FAQ
Is this tool free?
Yes — no sign-up, no installation, completely free to use right away.
What is this tool?
Visualize and configure CSS box model (margin, border, padding, content). Supports content-box and border-box. Copy the generated CSS. You can use it for free with no sign-up or installation — just open the page and start right away.