The Box Model, Visualised

Every HTML element is a box. The box has 4 layers. Hover any layer to see what each CSS property controls.

CONTENT (blue)
This is the actual content of the element.

In CSS this is:

.example {
  margin: 40px;
  border: 20px solid red;
  padding: 30px;
  background: blue;
  color: white;
}

Memory aid: padding = space inside the border. margin = space outside the border.