Ads by ProfitSence
Close

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

Last Updated on Wednesday 5th Oct 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.