How to calculate the real width and height of the css box model
For example: a box has a width of 200px, a height of 100px, a border of 10px, and padding of 20px
as shown in the figure;
calculation:
actual width : width+left border+left padding+right border+right padding=actual width
(10px+20px+200px+ 20px+10px=260px)
Note : (The padding value here is variable because it is the four attributes of the upper right, lower left, and four different values can be set, so in order to distinguish between the left and right paddin) border is the same
Actual height : height+upper border+upper padding+lower border+lower padding=actual height
(10px+20px+100px+20px+10px=160px)