CSS has two box models
Are
content-box: content box-content is the
border of the box border-box: border box-the border is the border of the box
Formula:
content-box width = content width
border-box width = content width + padding + border
Looking at the figure below, the div set to border-box is obviously much smaller than the content-box. It is generally recommended to use border-box, so that the width and height of the element are easy to calculate during layout.
