Interactive Box Model Playground

Adjust the Box Layers

🟢 Padding (Inside Space) 20px

🟡 Border (The Frame Outline) 5px

🟠 Margin (Outside Pushing Space) 15px

Blue = Your Text Content

Green = Padding Layer

Yellow = Border Outline

Orange = Margin Push

Visual Screen Render & Ready CSS

My ElementBox

Your Real CSS Styles Generated Automatically:

.my-element {\n padding: 20px;\n border: 5px solid #ffe599;\n margin: 15px;\n}