Modelo de cajas en CSS

Traducción de boxmodel:
Todos los elementos HTML son considerados como cajas. En CSS, el término "modelo de caja" o "box model" es usando al hablar del diseño y bosquejo.
El model de caja CSS es esencialmente una caja que se muestra alrededor de elementos HTML, el cual consiste de: márgenes, bordes, relleno y el contenido,
El modelo de caja nos permite colocar un borde alrededor de los elementos y espacio en relación a otros elementos.
El modelo se puede ver como la siguiente imagen:

Donde:

Margen (Margin): Es el espacio alrededor del borde. El margen no tiene color de fondo, es completamente trasnparente.

Borde (Border): Es el espacio alrededor del relleno y del contenido. El borde es afectado por el fondo de la caja.

Relleno(Padding): Es el espacio alrededor del contenido. El relleno es afectado por el color de fondo de la caja.

Contenido(Content): Es el contenido de la caja, donde se muestran las imágenes y el texto.