every element in web design is a rectangular box

The total width of an element should be calculated like this:

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.

The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. It often has a background colour or background image.

The padding area, bounded by the padding edge, extends the content area to include the element's padding.

The border, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the border-box width and the border-box height.

Margin is unique in that it doesn’t affect the size of the box itself per se, but it affects other content interacting with the box, and thus an important part of the CSS box model.