Cacher is the code snippet organizer for pro developers

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.
• The width of an element is now calculated by the content's width + horizontal padding + horizontal borderwidth.