Border box sizing model

By default CSS height and width refers to the size of the content of an element.

This can make it very difficult to get the size of say input fields and divs to be the same if you fiddle with the padding. So changing the model to border-box is helpful since now the size refers to the content plus the size of the padding and border.

You can do tricks like box-sizing : inherit.

I would not recommend it though - it’s confusing when it comes to understanding the layout of a page - better to set the box-sizing explicitly.

See:

box-sizing - CSS: Cascading Style Sheets | MDN