What is the difference between box-sizing: content-box and border-box?

The difference between box-sizing: content-box and box-sizing: border-box lies in how the browser calculates the total size of an element:

• content-box (default value): width and height specify only the content size. Padding and border are added to these sizes, increasing the overall size of the element.

• border-box: width and height include content, padding, and border. That is, padding and border are "inside" the specified sizes.

Example:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box; /* or border-box */
}

• With content-box, the total width will be: 200 + 102 + 52 = 230px.
• With border-box, the total width remains 200px, and the content size is reduced to accommodate padding and border.

Using border-box is often more convenient for layout, as element sizes do not "expand" due to padding and border.