It is important to note that the width and height of the element is different from the width and height of the content area.
How to calculate the size of the Box or the size of the entire element
Suppose the element is surrounded with these values,
width: 400px; /*width of the content area*/ height: 50px; /*height of the content area*/ padding: 5px 10px; /*space between outer edge of the content to inner edge of border */ border: 4px solid red; /*space between outer edge of Padding to inner edge of margin */ margin: 5px; /*space between outer edge of border to inner edge of margin itself */
then, what is the total width and height of the entire element?
To calculate the total length: width: 400px; Height: 50px; padding: 5px 10px; border: 4px solid red; margin: 5px 8px;
Total width of element = width of the content + left padding + right padding + left border + right border + left margin + right margin = 400px +10px + 10px + 4px + 4px + 8px + 8px = 444px
Total height of element = height of the content + top padding + bottom padding + top border + bottom border + top margin + bottom margin = 50px +5px + 5px + 4px + 4px + 5px + 5px = 78px
Padding is space between the outer edge of the content to the inner edge of the border.
It is the transparent area where space can be the same for all the sides or we can set different spaces for different sides.(Refer CSS Padding to learn about this.)
Border
The border is the space between the outer edge of Padding to the inner edge of the margin.
The border is used to set a border around the elements. To learn, more about borders, Click CSS border page.
Margin
The margin is the space between the outer edge of the border to the inner edge of the margin itself.
It is also the transparent area where space can be the same for all the sides or we can set different spaces for different sides.(Refer CSS Margin to learn about this.)
In the CSS box model, each element is represented as a rectangular box containing padding, border, margin built up around one another. Before creating a CSS layout we need to understand the CSS box model. We can also say the box model as a container which holds multiple properties.