What is the usefulness of the "border-box" and the "content-box" values of the box-sizing property?

If the border-box value of the box-sizing property does not add up the sizes of the padding and the border properties to the overall size of the content box, what then is the usefulness of the padding and border properties, if there’s an option to not have them add up to the total size of the element/box?

At what scenarios might one decide to choose the border-box value over the content-box value and vice versa?


Thinking of it like layers, the outer layer is always going to be the one interacting with outside elements (other boxes). The inner layer (content) is just going to deal with all inner elements. This is incredibly useful for segmenting your layout into logical forms that can be responsive.

This is particularly important because in the outer layer you define the skeleton of your design (head, arms, torso, etc) but the inner you describe in specific detail how you want things to look and be placed (eyes, mouth, nose). E.g you would never want the nose to appear in the arms – hence the division.