🔥 Free CSS Box Model Visualizer – Interactive Padding & Margin
CSS Box Model Visualizer
Interact with the box model layers to generate precise margin, border, and padding CSS.
Box Properties
■ Margin (Outer Space)
px
px
px
px
■ Border Width
px
px
px
px
■ Padding (Inner Space)
px
px
px
px
■ Content Dimensions
px
px
Live Visualizer & Code
margin
border
padding
Content
150 × 80
The CSS Box Model Explained
| Box Layer | Functionality | Affects Total Size? |
|---|---|---|
| Margin | The outermost layer. Clears an area outside the border. It is completely transparent. | Yes (in document flow) |
| Border | A border that goes around the padding and content. Inherits background color of the element. | Yes (unless box-sizing: border-box) |
| Padding | Clears an area around the content. Inherits the background color of the element. | Yes (unless box-sizing: border-box) |
| Content | The core content of the box, where text and images appear. | Base Size |
CSS Code Copied! ✓