box-sizing style 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 reduce 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.
/* Set box sizing to border-box (default) */ box-sizing: border-box; /* Set box sizing to content-box */ box-sizing: content-box;
# Set box sizing to border-box (default) widget.box_sizing = "border-box" # Set box sizing to content-box widget.box_sizing = "content-box"