EBAC Logotipo
Menú

3.7 El modelo de caja (Box Model), bordes, márgenes y espacios

Comprender el modelo de caja en CSS —contenido, padding, borde y margen— y utilizarlo para controlar el tamaño y el espacio entre los elementos en una página web.

1. Comprende qué es el modelo de caja en CSS

Cada elemento HTML visible es tratado por CSS como una caja, con diferentes capas que definen su forma, tamaño y espacio.


  1. Cada elemento tiene un contorno invisible que se estructura en 4 capas: contenido, relleno, borde y margen
  2. Este modelo determina cómo se muestran, alinean y colocan los elementos
  3. Controlar esta estructura permite crear interfaces consistentes y limpias
  4. Afecta desde botones hasta tarjetas y formularios.

2. Distingue las partes de una caja CSS

El modelo de caja incluye:


  1. Contenido: texto o elementos visibles.
  2. Padding: espacio interno que rodea el contenido.
  3. Borde: línea que envuelve el padding.
  4. Margen: espacio externo que separa de otros elementos.
  5. Comprenderlas ayuda a diseñar interfaces más controladas y adaptables.

3. Compara cajas en línea y en bloque

Los elementos en HTML pueden comportarse como cajas que fluyen en línea o se apilan como bloques.


  1. Cajas en bloque: ocupan todo el ancho y generan salto de línea. Ej: <div>, <p>.
  2. Cajas en línea: fluyen junto al texto, como <span>, <a>.
  3. El modelo de caja aplica a ambos, pero con restricciones.
  4. Puedes modificar su comportamiento con display.

4. Distingue margin y padding con claridad

Aunque ambos crean espacio, margin y padding tienen propósitos diferentes.


  1. Padding: espacio entre el contenido y el borde.
  2. Margin: espacio exterior que separa de otros elementos.
  3. Padding afecta el fondo; margin no.
  4. Los márgenes pueden colapsar verticalmente entre elementos.


5. Descubre cómo funciona box-sizing

La propiedad `box-sizing` define cómo se calculan las dimensiones de una caja.


  1. content-box: ancho/alto sólo al contenido.
  2. border-box: incluye padding y borde.
  3. Facilita mantener proporciones fijas.
  4. Útil establecerlo como valor global


* { box-sizing: border-box; }


6. Aprende a calcular el tamaño de una caja

El tamaño real puede diferir del width y height definidos.


Con content-box:

ancho = width + paddings + bordes

Con border-box:

ancho = width total declarado
  1. El margen queda fuera del cálculo.
  2. Comprender esto evita problemas de espacio y desbordes.

7. Usa padding para mejorar la legibilidad

El padding mejora la experiencia visual al dar espacio dentro de la caja, útil por varias cosas.


  1. Separa el contenido del borde.
  2. Mejora lectura y apariencia.
  3. También ayuda a organizar bloques de información.
  4. Es clave para jerarquizar contenido.


.tarea { padding: 16px; }


8. Aplica márgenes para separar elementos

El margen ayuda a mantener orden visual entre componentes.


  1. Se pueden aplicar márgenes en cualquier dirección. (left, top, right, bottom)
  2. Define distancias entre elementos vecinos. (Margen horizontal y vertical)
  3. Clave en layouts como listas o tarjetas.
  4. Mejora la lectura y el flujo visual.


.tarea { margin-bottom: 12px; }

9. Personaliza bordes para destacar contenido

Los bordes pueden ayudarte a resaltar elementos o agrupar visualmente bloques.


  1. Puedes personalizar el color, el grosor y el estilo (solid, dashed, dotted, etc.).
  2. También se pueden redondear con border-radius.


.tarea { border: 2px solid #aaa; }


Un borde visible también aporta estructura visual al diseño.

10. Inspecciona cajas con DevTools del navegador

Las herramientas de desarrollo permiten visualizar el modelo de caja.


  1. Chrome, Firefox y Edge lo muestran gráficamente un diagrama del box model.
  2. Selecciona un elemento y observa sus medidas.
  3. Puedes ver el tamaño, padding, borde y márgenes en tiempo real.
  4. Útil para depurar errores visuales o sobreposición de elementos directamente.
  5. Activa el panel “Inspector” > selecciona un elemento > pestaña “Estilos”