CSS Box Sizing
The box-sizing property in CSS specifies how the user should determine whether to incorporate padding and borders when calculating the overall width and height of an element.
Syntax
Property Values: All the properties are described well with the example below.
content-box:
This is the box-sizing property's default value. Only the content is included in the width and height attributes in this mode. Border and padding are excluded from it, thus if we set an element's width to 200 pixels, the content box will also be 200 pixels wide, and any border or padding will be added to the element's final rendered width.
border-box:
The width and height settings in this mode also contain padding, content, and borders. For example, if we set the width of an element to 200 pixels, that width will include whatever padding or border we added, and the content box will enlarge to accommodate that extra width. Usually, this makes sizing elements much simpler.