Box Model Visualizer

An interactive tool to understand padding, border, and margin on the CSS Box Model.

Margin: 20px

Border: 5px

Padding: 30px

Content Width: 200px

Content Height: 100px

margin: 20px

border: 5px

padding: 30px

Content

200 × 100px

Content: 200px

+ Padding: 60px (left + right)

+ Border: 10px (left + right)

+ Margin: 40px (left + right)

310px

Content: 100px

+ Padding: 60px (top + bottom)

+ Border: 10px (top + bottom)

+ Margin: 40px (top + bottom)

210px

• Content: The actual content (text, images)

• Padding: Space between content and border (inside)

• Border: Line around the padding

• Margin: Space outside the border

• Use box-sizing: border-box to include padding/border in width/height