CSS Visualizer

Understand CSS concepts visually and interactively. Edit the CSS properties and see the changes in real-time.

Interactive CSS Concepts

Select a concept below to explore and interact with CSS properties

Width: 200px

Height: 100px

Padding: 20px

Border: 5px

Margin: 30px

Box Sizing

Content

200px × 100px

padding

border

margin

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #000;
  margin: 30px;
  box-sizing: content-box;
}