What is box-sizing in CSS?

What is box-sizing in CSS?

Box-sizing is used to control how the width and height of an element are calculated.

There are two main values:

1. content-box:
   The width and height apply only to the content. Padding and border are added outside.

2. border-box:
   The width and height include the content, padding, and border.

For example, if I give "width: 200px" and use "border-box", the total width of the box will remain 200px, including padding and border.

So, I mostly use "border-box" because it makes the layout easier to control.