CSS box model is box which is surrounds all the tags in HTML with content, padding, margin and border. If you see above box , inner most blue part represents contents, green is padding , then border and then margin. We as a developer can set these values as per our design.
Detailed explanation of these terms:
- Content -Content appears in the center of the box. It is the place where text and images appear
- Padding – Padding is used to clears an area around the content and make some space. The padding is transparent
- Border – A border that covers the padding and content
- Margin – Margin clears an area outside the border. The margin is also transparent.
We can describe this as below:
padding: 0 ;
<!– Content –>
In order to set height, width of the box properly you need to understand below maths for this: Total width of an element should be calculated as below:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
In our case it will be:
Total element width = 750px + 0 px+0px + 0px +0px+100px+0px = 850px
See in the below example where page is divided in 2 blocks i.e. navbar and centerdoc
The highlighted orange part is div and above that there is nav tag.
More information can be collected from https://www.w3schools.com/css/css_boxmodel.asp