CSS Box Sizing

Default Size

By default in the CSS Box Model, the width and height of an element is calculated by the following way:

total width = width + padding (left + right) + border (left + right)

total height = height + padding (top + bottom) + border (top + bottom)

This means the element appears bigger than the we have set by width and height properties.

For example, if we set width to 100vw (available device width), border to 5px and padding to 10px. This will create an element with box size equals to 100vw+30px and the element will overflow.

Box Sizing

The box-sizing will solve this problem by allowing us to include padding and border to total width of the element.

Box Sizing Values

content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.

border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.