Interactive lab
Box Model Playground
Every element on a page is built from nested boxes: margin, border, padding, and content. Drag the sliders below and watch the box change in real time.
Try it
Adjust the Box
Every element on a page is margin, border, padding, and content, nested like a set of frames. Drag to see it for real.
margin
border
padding
content
margin: 16px; border: 4px; padding: 16px;