Saltar al contenido principal

Modelo de Cajas

El modelo de cajas (Box Model) es un concepto fundamental en CSS que define cómo se representan visualmente los elementos HTML. El Inspector de Elementos proporciona herramientas visuales para comprender y modificar estos componentes espaciales de cualquier elemento.

¿Qué es el Modelo de Cajas?​

Cada elemento HTML se representa como una caja rectangular que consta de:

  1. Content: El contenido real del elemento (texto, imágenes, etc.)
  2. Padding: El espacio entre el contenido y el borde
  3. Border: La línea que rodea el padding y el contenido
  4. Margin: El espacio exterior alrededor del borde

Modelo de Cajas

Visualización del Modelo de Cajas en el Inspector​

Para ver el modelo de cajas de un elemento:

  1. Selecciona un elemento usando el inspector
  2. Busca la representación visual del modelo de cajas (generalmente en la pestaña "Computed" o dentro del panel de estilos)
  3. Se mostrará un diagrama interactivo con las dimensiones de cada componente

Diagrama del Modelo de Cajas​

El diagrama muestra:

  • Las dimensiones del contenido en el centro (width × height)
  • Los valores de padding en las cuatro direcciones
  • Los valores de border en las cuatro direcciones
  • Los valores de margin en las cuatro direcciones

Cada valor se muestra en píxeles, independientemente de cómo se haya definido en el CSS original.

Modos del Modelo de Cajas​

El inspector también muestra el modo de caja utilizado:

Content-Box (Estándar)​

  • box-sizing: content-box (valor predeterminado)
  • El ancho y alto especificados se aplican solo al contenido
  • Padding y border se añaden a estas dimensiones

Border-Box​

  • box-sizing: border-box
  • El ancho y alto especificados incluyen el contenido, padding y border
  • Los margin son adicionales

El inspector muestra qué modelo está activo y cómo afecta a las dimensiones finales.

Modificación del Modelo de Cajas​

El diagrama del modelo de cajas es interactivo:

  1. Haz clic en cualquier valor (margin, border, padding, width, height)
  2. Edita el número directamente
  3. Usa las flechas arriba/abajo para incrementar/decrementar el valor
  4. Presiona Enter para aplicar el cambio

Edición del Modelo de Cajas

Atajos para edición de valores​

  • Shift + clic/arrastrar: Cambia el valor en incrementos de 10
  • Alt/Option + clic/arrastrar: Cambia el valor en incrementos de 0.1
  • Doble clic: Edita el valor directamente

Visualización de medidas en la página​

Además del diagrama, el inspector ofrece visualizaciones superpuestas en la página:

Resaltado de elementos​

  1. Al pasar el cursor sobre un elemento en el inspector, se resalta en la página
  2. Los colores diferentes indican diferentes partes del modelo de cajas:
    • Azul: Contenido
    • Verde: Padding
    • Amarillo/Naranja: Margen
    • Marrón/Gris: Borde

Reglas y guías​

Algunos navegadores muestran:

  • Líneas guía que indican las dimensiones
  • Valores numéricos junto a las áreas resaltadas
  • Indicadores de flujo de diseño (horizontal/vertical)

Inspección de layouts flexibles​

Para elementos con display:flex o display:grid:

  1. El modelo de cajas muestra información adicional específica
  2. Se visualizan indicadores de distribución de espacio
  3. Se muestran líneas guía para tracks (filas/columnas)

Flexbox​

  • Visualización del eje principal y transversal
  • Distribución del espacio con justify-content y align-items
  • Orden de los elementos flex

Grid​

  • Visualización de líneas de cuadrícula numeradas
  • Tamaño de tracks (filas y columnas)
  • Áreas de cuadrícula nombradas

Casos de uso comunes​

Depuración de problemas de espaciado​

  1. Inspecciona un elemento que no está alineado correctamente
  2. Revisa los valores de margin para detectar asimetrías
  3. Verifica si hay colapso de márgenes entre elementos adyacentes

Solución de problemas de desbordamiento​

  1. Busca elementos con dimensiones inesperadas
  2. Verifica si el contenido es más grande que el contenedor
  3. Comprueba si box-sizing está configurado correctamente

Ajuste de diseño responsivo​

  1. Usa el modo responsive para cambiar el tamaño de la ventana
  2. Observa cómo cambian las dimensiones del modelo de cajas
  3. Ajusta los valores para mantener la consistencia en diferentes tamaños de pantalla

Consejos avanzados​

  • Comparación de elementos: Selecciona diferentes elementos para comparar sus modelos de caja
  • Anotaciones: Algunos navegadores permiten tomar capturas con anotaciones del modelo de cajas
  • Visualización persistente: Mantén el diagrama visible mientras navegas por la página para ver cambios dinámicos

En la siguiente sección, aprenderemos cómo modificar estilos directamente en el inspector para probar cambios en tiempo real.