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.