The CSS Box Model

Every element is a rectangular box made up of content, padding, border and margin — in that order, from the inside out.

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  margin: 10px;
  box-sizing: border-box; /* width includes padding + border */
}

content-box (default) — width/height apply to content only; padding/border ADD to the total size
border-box — width/height include padding and border; usually the more predictable choice

Tip

Recommend * { box-sizing: border-box; } as a near-universal reset — interviewers like hearing the WHY, not just the WHAT.