The CSS box-sizing property uses padding and border to calculate an element's total width and height.
The CSS box-sizing property allows us to select either
content-box property while using width and height. Please keep in mind that the
content-box is the default value of
This is the default value of box-sizing that uses border and padding during the calculation of the total width and height of the element.
Total width of the HTML element = content width +padding + border
Total height of the HTML element = content width +padding + border
border-box property of box-sizing does not increase the total width and height of the HTML element means total width will be same as the width set for the element but it shrink the content area space since shrinkage space is distributed among padding and border.
width of content Area = width - (padding + margin + border-width)
width - (padding + margin + border-width) + padding + margin + border-width = Total width
height - (padding + margin + border-width) + padding + margin + border-width = Total height
Creating multi-column layout using the box-sizing property. In this case, you do not have to worry about the final size of the element's box while adding the padding and border on the element.
Here, creating the three-column layout and each column has equal width and lies side by side using the float property.