CSS Box Model Interactive Exercise

Instructions

Use the sliders to adjust the content, padding, border, and margin properties of the box. Watch how the box model changes in real-time!

The colored layers represent the different parts of the CSS box model:

Content Width:

100px

Content Height:

100px

Padding:

20px

Border Width:

5px

Margin:

20px

Margin

Border

Padding

Content Content Box

.my-element {
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 20px;
}