Understanding the Box Model part 2

Total Width of an Element

When working with boxes, it is important to understand how the total width of an element is calculated. 
For example, the total width of the box with paddings will be the sum of width plus padding left and padding right.
Here is another box with margins, border, and paddings. 
The total width is the sum of left and right margins, left and right borders, left and right paddings, and the actual width of the content.
When you set the width and height properties of an element with CSS, you set the width and height of the content area.
When setting a background-color to a box, it covers the content area, as well as the padding.