What is the CSS box model and how does it work?

Every element is rendered as a box. By default, width and height apply to content only, while padding and border add to total rendered size. Margin sits outside the border and controls spacing between elements. Setting box-sizing: border-box often makes layouts easier because width includes padding and border.

.card {
  width: 280px;
  padding: 16px;
  border: 2px solid #334;
  box-sizing: border-box;
}

Start simple: try this concept in a tiny project before moving to advanced tools.