CSS box-sizing Property

box-sizing
defines how the width and height gets applied on an element. It can be useful to play with box-sizing if, for example, an element needs to take a precise amount of space on a page, with its padding and border included. It can take two possible values:

content-box
: The width & height of the element only include the content. In other words, the border, padding and margin aren’t part of the width or height. This is the default value.

border-box
: The padding and border are included in the width and height.

There was also a padding-box
value, but it’s now deprecated and should no longer be used.

Here’s an example to illustrate the two possible values:

box-sizing: content-box

Notice that with content-box
the element ends up taller and wider than the specified dimensions because the border and padding fall outside of those dimensions.