The box model

The box model describes the space taken up by elements. By default, block elements and replaced elements (such as images) will adhere to the box-model.

Nothing

By default, images have no margin, padding or border.

a cat a cat a cat a cat a cat a cat a cat a cat a cat a cat
A few images

Margins

Margin adds space around elements

a cat a cat a cat a cat a cat a cat a cat a cat
A few images with 1rem margin

Padding

Padding adds space inside elements

a cat a cat a cat a cat a cat a cat a cat a cat
A few images with 1rem padding

Both

Both padding and margin

a cat a cat a cat a cat a cat a cat a cat a cat
A few images with 0.5rem both

Borders

Borders sit at the edge of the element between the padding (inside) and the margin (outside).

a cat a cat a cat a cat a cat a cat a cat a cat
Adding a border