CSS Box Model

Box Sizing Property

The calculations for the width or height in the box model tend to become complex. This is why, CSS has an alternative box model, where the padding and border sizes are included within the specified width. The margin is excluded. This makes the calculation of the width simpler.

The property box-sizing is used to determine how these calculations will be done. By default, the value is content-box because of which the original box model is used. When we set this to border-box, the alternate model is followed:

In the above example, the visible width of the second div is the same as the specified width of 250px because the box-sizing is now border-box.