TEMA 7

Modelo de caja

El modelo de cajas o “box model” es seguramente la característica más importante del
lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web.
El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las
páginas se representen mediante cajas rectangulares.

La representación básica del modelo de cajas es la siguiente, donde podemos observar varios conceptos importantes a diferenciar:

El borde (border). En negro, es el límite que separa el interior del exterior del elemento.
El márgen (margin). En naranja, es la parte exterior del elemento, por fuera del borde.
El relleno (padding). En verde, es la parte interior del elemento, entre el contenido y el borde.
El contenido (en azul). En azul, es la parte interior del elemento, excluyendo el relleno.