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.