What does * { box-sizing: border-box; } do? What are its advantages?

• By default, elements have box-sizing: content-box applied, and only the content size is being accounted for.
• box-sizing: border-box changes how the width and height of elements are being calculated, border and padding are also being included in the calculation.
• The height of an element is now calculated by the content's height + vertical padding + vertical border width.

What does * { box-sizing: border-box; } do? What are its advantages? (Cont...)

• The width of an element is now calculated by the content's width + horizontal padding + horizontal border width.
• Taking into account paddings and borders as part of our box model resonates better with how designers actually imagine content in grids.