Box model and box-sizing — where does the width come from?

An element's box consists of the content, padding, border and margin. With content-box the width applies to the content only; with border-box it also includes padding and border.

.card {
  width: 200px;
  padding: 20px;
  border: 2px solid;
  box-sizing: border-box;
}

Result: the outer width of the border box is 200 px; the content gets 156 px. With content-box it would be 244 px. The margin is not part of those 200 px.

Pitfall: width: 100% plus padding under content-box can cause overflow.