The box-sizing property is used to define the area represented by the width and height of the element. This property generally has three values: content-box, border-box, and inherit.

Where inherit means that the value of box-sizing should be inherited from the parent element.

The main difference between content-box and border-box is that the value package of width and height of the element does not include the values of border and padding.

1. Content-box

content-box, also known as the standard box model, is the default.

Its width consists of only the content area (excluding the padding area and border area)

For example, if the width of the element is 100px, then this means that the content area of the element is 100px wide, and if the padding is 10px and the border width is 10px, then its actual width is width+(padding-left)+( padding-right)+(border-left-width)+(border-right-width)=100px+10px+10px+10px+10px=140px;

The following figure is a schematic diagram of the standard box model:

　　standard box model

Second, border-box

border-box is also called the IE box model

Its width consists of content area, padding area, border area

　For example, if the width of the element is 100px, then its actual width is 100px, and if its padding is 10px and the width of the border is 10px, then the width of the content area of the element is width-(padding-left)- (padding-right)-(width-left-width)-(width-right-width)=100px-10px-10px-10px-10px=60px;

The following figure is a schematic diagram of the IE box model:

IE box model