Html css Box Model

CSS Box Model
Each element in the web design is a rectangular box. How to accurately calculate the size of the box, please refer:

If you are a firebug user (firebug-sugar and tomato will be used basically for front-end users), you will be familiar with the following charts.
This chart shows the values that act on any box on the page.

Note that in the above two examples, margin is white. Margin is special. It does not affect the size of the box, but it affects other content related to the box. Therefore, margin is an important component of the box model.
The size of the box itself is calculated as follows:
Width width + padding-left + padding-right + border-left + border-Right
Height height + padding-top + padding-bottom + border-top + border-bottom