CSS Box Sizing

The actual rendered width and height of any element is calculated by including the width and height set along with that of its padding and borders.

However, CSS has a way to include these two within the total height and width of the element. This is where Box Sizing comes in picture.

Here’s the default formula for calculating the rendered width and height of the element

width (set using width property) + padding (left and right) + border (left and right) = actual width of an element
height (set using width property) + padding (top and bottom) + border (top and bottom) = actual height of an element

In short, the height and width of the element appear to be more than what was set by you in the CSS design. This problem is solved by the Box-sizing feature of CSS.

Here, the padding and border are also included within the element’s total dimensions rather than in addition to it. To do this, we use the CSS property box-sizing property. We give the value as “border-box” to include the padding and borders within the box.

Basically, the box-sizing property helps us to control the area for which we want to set the width and height property. It can just be the content area or the padding and borders included as well.

Here are some permissible values for the same:
content-box: This is the default value. The width and height properties can only set the dimensions for the content area and hence the rendered element will have a slightly larger appearance because of the added dimensions of padding and border.
border-box: The width and height properties set the cumulative dimensions of content area, padding, and border.
initial: Sets the default value
inherit: Inherits the whatever value is set for the parent element in this property. If no value is set in the parent element, content-box will be set by default for both.