CSS Tool

Box Model Visualizer

Interactive CSS box model diagram with live preview. Adjust margin, border, padding, and content dimensions to generate ready-to-use CSS code.

Box Model Diagram
16161616margin
2222border
16161616padding
200 × 150
Computed Dimensions
Content200 × 150px
+ Padding232 × 182px
+ Border236 × 186px
+ Margin (total space)268 × 218px
Generated CSS
margin: 16px;
padding: 16px;
border: 2px solid #00ffcc;
width: 200px;
height: 150px;
box-sizing: content-box;
Input Mode
Content Dimensions
200px
150px
Margin64px total
16px
Border
All2px
Padding64px total
16px
Presets