The box model is used when it comes to design.
In this box model, all HTML elements are considered as boxes.
Each box consists in turn of other 4 boxes: Margin, Border, Padding and Content.
The four boxes that comprise each HTML element are:
To find the actual width and height of an HTML element we have to take into account the four previous cases.
Real width content element = width + left padding + right padding + left border + right border + margin + right margin left
For example, if an item has this definition in 4 boxes:
The actual width of the item will be 200 px
150 + 10 + 10 + 5 + 5 + 10 + 10 = 200 px
The same thing would be to calculate the height of the element