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.

css box model

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:

width:150px; padding:10px; border:5px solid gray; margin:10px;

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