Box Sizing

Published: November 21, 2014By brooklynwriters
  • Width
  • Min Width
  • Max Width
  • Height
  • Min Height
  • Max Height
  • Box Sizing
  • Object Fit
  • Object Position

The box-sizing property determines if padding and border should be added to the value set for width/height or form part of the value set for width/height (including min/max). Although the default value for box-sizing is content-box, many view this to be a mistake as elements can be easier to layout when padding and border are included in the width (border-box).

Value Description
content-boxPadding and border values are added to the value given for width/height. For instance, total width = width + padding + border. This is the default.
border-boxPadding and border values form part of the value given for width/height. For instance, total width = width.

Themeover CSS Reference

Close