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.
box-sizing is used
to determine how these calculations
will be done. By default, the value
content-box because of which
the original box model is used.
When we set this
border-box, the alternate
model is followed:
In the above example,
the visible width of the second
div is the same as the specified
250px because the