Explain Different Box Sizing Property?

Question

What is Different Box Sizing Property?

Answer 1

The box-sizing CSS property sets how the total width and height of an element are calculated.

1. Content-box: The default width and height values apply to the element's content only. The padding and border are added to the outside of the box.
2. Padding-box: Width and height values apply to the element's content and its padding. The border is added to the outside of the box. Currently, only Firefox supports the padding-box value.
3. Border-box: Width and height values apply to the content, padding, and border.