How is box-sizing effectively used in CSS?

Answer 1

I most commonly use it when thinking about padding for my divs.

By default, if I set a div to width 100px and then add a padding of 20px, my div will ultimately be 120px wide because the padding gets added to the width of the div.

If I instead set the div to have "box-sizing: border-box", even if the div still has a width 100px and padding 20px, the div will ultimately be 100px wide. Because when you set the "box-sizing" to "border-box", the 100px wide size is honored and adding padding will instead shrink the content inside instead of expanded the width of the div.