Explain the concept of the box model in css

CSS uses the concept of a box model which implies that every HTML element is a box. This term is used when we are talking about design and layout.
The CSS box model is actually a box that wraps an HTML element. A box comprises of the following components:
- margins : used to clear an area around a border.
- border : border goes around the padding and the content.
- padding : used to clear the area around the content.
- content : This contains the actual content of the box that is the text and the images.
It is important to note that when a user sets the height and width of an element, they are doing so only for the content area. To know the fill size of the element the user must also specify the other layers ie. the padding border and margins.
For ex.
p
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
The total width of an element is calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element is calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin