CSS box-sizing

CSS box-sizing property defines how the user should calculate the total width and height of an element including padding and border.

box-sizing Property Values

content-box: This is the default value of box-sizing property.

Example:

By default, the width and height of an element is calculated by adding padding and border with it.
width + padding + border = actual width of an element
height + padding + border = actual height of an element

It means that when a user set the width or height of an element, It often appears bigger than he has set it because the element's border and padding are added to the element's specified width or height. This problem can be solved by using border-box value.

border-box: In this property the padding and border of a content are included in the width and height.

Example: