content

A box can have content (background), padding, border and margin. This box has only content with the background set to a very light blue. Content fills the element box from the left to the right border of the container.

content + padding

A box can have content (background), padding, border and margin. This box has content and padding (10px). Content fills the element box from the left to the right border, but when padding is added it pushes the borders away from the content.

content + padding + border

A box can have content (background), padding, border and margin. This box has content, padding, and border(4px, solid style, colored medium blue). Content fills the element box from the left to the right border, but when padding is added it pushes the borders away from the content. A border surrounds the box. The sides of the border can all be the same width or different widths.

content + padding + border + margin

A box can have content (background), padding, border and margin. This box has content, padding, border, and margin (100px). Content fills the element box from the left to the right border, but when padding is added it pushes the borders away from the content. A border surrounds the box. The sides of the border can all be the same width or different widths. The margin defines the distance between a box and adjacent elements in the container.

size = content (width) + padding + border + margin

The element of width; has been added to this box. Width is the size of the content (background). Here are the dimensions of this box given below –

width = 400 px x 1 = 400 px
padding = 10 px x 2 = 20 px
border = 4 px x 2 = 8 px
margin = 100 px x 2 = 200 px

size = 400 px + 20 px + 8 px + 200 px

size = 628 px