The box-sizing property determines how the width and height of an element is calculated.
box-sizing only accepts two values: content-box and border-box.
box-sizing default value is content-box which means that the width of an element is calculated in the following way:
actual width = width + border-left + border-right + padding-left + padding-right
This way it's sometimes hard to calculate the actual width of an element, specially when using relative values.
In the following example we are using content-box by default. The child element has a width of 100%, a border of 8px and a padding of 4px. The actual width is calculated in the following way (you can inspect the element to check it):
actual width = width 100% + border 8px + padding 4px
Instead, if we change box-sizing to border-box the width of the element will take into account the padding and borders. The child component still has a width of 100%, a border of 8px and a padding of 4px, but the actual width is 100%.
You can play with the following interactive example to see how the width of the child component changes depending on the value of box-sizing.
