Box model

Every element is a box: content, padding, border, margin.

What is the box model?

The box model says every element is a box made of four layers: content, then padding, then border, then margin.

.card {
  width: 200px;     /* content */
  padding: 16px;    /* around the content */
  border: 2px solid #333;
  margin: 12px;     /* outside the border */
}

Level: Novice · More CSS terms at this level

Updated September 27, 2026