CSS utiliza un modelo de cajas para cada elemento. Imaginate que cada elemento HTML es en realidad una caja. De esta forma, cada caja tiene cuatro elementos fundamentales: el elemento, el padding, el border y el margin.

Content: el contenido dentro de la caja. Por ejemplo, si tenemos el siguiente parrafo

<p>Club Atlético River Plate </p> —> La frase Club Atletico River Plate será el contenido de la caja.

Padding: El espacio que hay alrededor del contenido. El padding es transparente

Border: Una linea separadora entre lo que se encuentra dentro de la caja y fuera de la misma.

Margin: El espacio que se encuentra fuera de la caja.

Veamos un ejemplo para ver como funciona el box modeling. Tenemos el siguiente HTML, que sería una caja.

<p>Club Atlético River Plate</p>

Vamos a darle estilos a nuestra caja. Vamos a darle color marron de fondo, un padding de 10 pixeles, un borde de 10 pixeles azul y un margen de 100 pixeles.

p{
  text-align:center;
  background-color:brown;
  color: white;
  padding:10px;
  border: 10px solid blue;
  margin: 100px;
}

Esto quedaría asi

El espacio blanco es el margin, el borde es lo marcado en azul y el padding es lo que se ve en marron, ya que el background-color es de ese color.

ATENTI

Como ya lo dijimos cuando hablamos de ancho, el width no tiene en cuenta el padding, el border y el margin. El calculo para saber el ancho total de un elemento es el siguiente:

width = width + padding izquierdo + padding derecho + border izquierdo + border derecho + margin izquierdo + margin derecho.