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.

Total Height of an Element

The total height of an element is calculated the same way as the width. The example below is the same box from the previous lesson with padding, border and margin.