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