box-sizing - How does it work?

Technical explanation

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.

Example

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%.

At the bottom of the article in my website 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.

Resources

• MDN box-sizing