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

box-sizing: content-box is the default value, where the dimensions (width, height) of an element only refer to its content. Padding (padding) and borders (border) are added to this size, increasing the overall dimensions of the element.

box-sizing: border-box includes padding (padding) and borders (border) within the specified dimensions (width, height). Thus, the total size of the element remains equal to the specified width and height, and the content size is reduced proportionally to padding and border.

Property	box-sizing: content-box (default)	box-sizing: border-box
width/height	Content size	Entire element size (including padding and border)
Total element size	width/height + padding + border	width/height

Example:

.element-content-box {
  width: 100px;
  height: 50px;
  padding: 10px; /* Added to width and height */
  border: 1px solid black; /* Added to width and height */
  box-sizing: content-box; /* Default */
}

.element-border-box {
  width: 100px;
  height: 50px;
  padding: 10px; /* Included in width and height */
  border: 1px solid black; /* Included in width and height */
  box-sizing: border-box;
}