box-sizing property determines how the width and height of a widget are calculated.
||Padding and border are included in the width and height. If you add padding and/or border the widget will not change in size, but you will have less space for content.|
||Padding and border will increase the size of the widget, leaving the content area unaffected.|
Both widgets in this example have the same height (5).
The top widget has
box-sizing: border-box which means that padding and border reduces the space for content.
The bottom widget has
box-sizing: content-box which increases the size of the widget to compensate for padding and border.