The CSS Box Model consists of 5 parts:
1) Content – The actual content of the element. It can be anything, such as text, images, videos, etc.
2) Border – A line around the element, and still inside of the element.
3) Padding – Invisible space around the content, and also inside of the element.
4) Margin – Space OUTSIDE of the element, and between other elements.
5) Fill Area – Area that gets filled with background color or background image. Inside the element.
The calculation of the final element width and height:
Final element width = left border + left padding + width + right padding + right border.
Final element height = top border + top padding + height + bottom padding + bottom border.