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 kitten a kitten a kitten a kitten a kitten a kitten a kitten a kitten a kitten a kitten
A few images

Margins

Margin adds space around elements

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

Padding

Padding adds space inside elements

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

Both

Both padding and margin

a kitten a kitten a kitten a kitten a kitten a kitten a kitten a kitten
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 kitten a kitten a kitten a kitten a kitten a kitten a kitten a kitten
Adding a border