CSS BOX MODEL

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