back

Box-Sizing

This is used to change the box model in terms of height and width of an element.
In default CSS, the height and width properties (and their max and min counterparts) set the size of the content box and then paddings, borders, and margins are added.
So a 50px square with a border of 2px is actually 54px, box-sizing allows you to change that so height and width set the size of the entire box (though not the margin). Which means that a 50px square with a border of 2px is 50px in size, its content area is just made smaller.
Its options are:
(1) Content-box, this is default, the height and width properties set the size of the content box, paddings, borders, and margins are then added.
(2) Border-box, the size properties set the size of the border box, content, paddings and borders are then created inside it.
(3) Inherit, the value is inherited from its parent element.

Example