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

Last Updated On Monday 25th Apr 2022

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

• Make every element in the document include the padding and border in the element’s inner dimensions;
making it easier to reason about the layout of elements on the page.
• 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 border width.
• Taking into account paddings and borders as part of our box model resonates better with how designers actually imagine content in grids.