How does the value of the box-sizing property affect the size of an element in CSS?

box-sizing determines how the total size of an element (width and height) is calculated, including its padding and border.

There are two main values:

• content-box (default value): The width and height of the element are determined only by the content size. Padding and border are added to this size, increasing the overall size of the element.
• border-box: The width and height of the element include padding and border. The content size is reduced to accommodate them.

Let's illustrate with an example:

.element {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid black;
}

If box-sizing: content-box;: The total width will be 100px (content) + 10px (padding left) + 10px (padding right) + 5px (border left) + 5px (border right) = 130px. The total height will be 50px (content) + 10px (padding top) + 10px (padding bottom) + 5px (border top) + 5px (border bottom) = 80px.

A table for clarity:

Property	box-sizing: content-box;	box-sizing: border-box;
Element width	width + padding + border	width (includes content, padding, border)
Element height	height + padding + border	height (includes content, padding, border)
Content block size	width, height	width - (padding + border), height - (padding + border)

border-box is often considered more intuitive for calculating sizes, especially in responsive design, as the set width and height are maintained regardless of added padding and border.