The Box Model – Hacker Noon

Example —

div{
border: 5px solid;
margin: 50px;
padding: 20px;
}

This CSS styles all div elements to have a top, right, bottom and left border of 5px in width and a top, right, bottom and left margin of 50px; and a top, right, bottom, and left padding of 20px. Ignoring content, our generated box will look like this:

What is the height and width of the above element box?

If your answer is Zero then you are wrong because the height and width are 150px by150px.
The space that an element’s box take is calculated like this:

Total Width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

eg — total width = 0px + 20px + 20px + 5px + 5px + 50px + 50px = 150px

Total Height = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

eg — total height = 0px + 20px + 20px + 5px + 5px + 50px + 50px = 150px

read original article here