El modelo de caja de CSS, explicado visualmente

Cada bug de layout contra el que alguna vez has peleado — el botón que no se alinea, la sección que desborda por cuatro píxeles misteriosos, la imagen que queda demasiado cerca del texto — tiene la misma causa raíz. Estabas pensando en los elementos como formas. CSS los piensa como cajas.

Entender el modelo de caja de CSS no es conocimiento opcional al que recurres cuando algo se rompe. Es el modelo mental que necesitas antes de escribir una sola regla de layout.

¿Qué es el modelo de caja de CSS?

Cada elemento que renderiza el navegador es una caja rectangular compuesta por cuatro capas concéntricas:

• Content (contenido) — el contenido real del elemento: texto, una imagen, un elemento hijo.
• Padding (relleno) — espacio transparente dentro de la caja, entre el contenido y el borde.
• Border (borde) — el borde visible (o invisible) que envuelve el relleno y el contenido juntos.
• Margin (margen) — espacio transparente fuera de la caja, que empuja a otros elementos.

Piensa en ello como una foto enmarcada: la foto es el contenido, el paspartú es el relleno, el marco es el borde, y el espacio entre ese marco y la pared es el margen.

.card {
  /* tamaño del contenido definido por width/height */
  width: 300px;
  height: 200px;

  padding: 24px;               /* espacio interior */
  border: 2px solid #e2e8f0;   /* el marco */
  margin: 16px;                /* distancia de los vecinos */
}

La trampa de box-sizing

Aquí es donde la mayoría de los desarrolladores chocan por primera vez con el modelo de caja. Por defecto, width y height en CSS definen solo el cuadro de contenido — no incluyen padding ni border. Esto es box-sizing: content-box.

Entonces el .card de arriba no tiene 300px de ancho en pantalla. Tiene 300 + 24 + 24 + 2 + 2 = 352px. Esa es la matemática que explica la mitad de los bugs de desbordamiento que encuentres.

La solución que aplica prácticamente cualquier proyecto moderno:

*, *::before, *::after {
  box-sizing: border-box;
}

Con border-box, width incluye el padding y el border. El elemento permanece en 300px en total; el área de contenido se reduce para acomodar los extras. Esto es lo que conviene el 99% del tiempo.

Regla general: Establece box-sizing: border-box de forma global al inicio de tu hoja de estilos. Trata content-box como el valor heredado del que conviene salir, no como el estándar que eliges a propósito.

Colapso de márgenes — el comportamiento que nadie explica

El colapso de márgenes es el comportamiento de CSS que sorprende a los desarrolladores por más tiempo. La versión corta: cuando dos elementos de bloque están apilados verticalmente y ambos tienen márgenes, los márgenes se fusionan en el mayor de los dos en lugar de sumarse.

.section-a { margin-bottom: 32px; }
.section-b { margin-top: 24px; }
/* Espacio entre ellos: 32px — no 56px */

Esto es intencional. Existe para evitar que el espaciado de párrafos se duplique entre bloques de texto adyacentes. Pero produce resultados confusos cuando se construyen layouts basados en componentes donde se espera que los espaciados se acumulen.

El colapso no ocurre cuando:

• Los elementos viven en un contenedor flex o grid (esos layouts no colapsan márgenes en absoluto)
• Hay un border o padding entre los dos márgenes, o el contenedor padre tiene overflow con un valor distinto de visible
• Uno de los elementos está posicionado de forma absoluta o flotado

El segundo punto es el que más se olvida. Un solo píxel de padding en un contenedor basta para impedir que el margen de su hijo se escape y colapse con el del padre.

Elementos inline vs. block y el modelo de caja

El modelo de caja aplica a todos los elementos, pero los elementos inline (como <span>, <a>, <em>) se comportan de forma diferente:

• El padding y margin horizontales empujan el contenido lateralmente como se espera.
• El padding vertical se renderiza pero no separa las líneas adyacentes — puede superponerse a ellas.
• El margin vertical se ignora completamente en elementos inline.

Si quieres control total del modelo de caja, establece display: block o display: inline-block. Por eso los elementos inline que necesitan espaciado consistente casi siempre requieren display: inline-block o un contenedor de bloque.

Cómo depurar el modelo de caja visualmente

Leer valores calculados mentalmente es agotador. El enfoque práctico es hacer visible el modelo de caja.

Las DevTools del navegador muestran un diagrama con código de colores en el panel Elements — al pasar el cursor sobre cualquier elemento verás el content (azul), padding (verde), border (amarillo-naranja) y margin (naranja) renderizados como rectángulos concéntricos. Esto solo resuelve la mayoría de los misterios de dimensionado.

El problema es que hay que abrir DevTools, encontrar el panel correcto, hacer clic en el elemento correcto y luego cruzar la información del diagrama con la página real. Cuando se hace un recorrido de layout a través de decenas de elementos, el costo de cambiar de contexto se acumula rápidamente.

La herramienta Inspeccionar de PxGuard pone esta superposición directamente en la página. Al pasar el cursor sobre cualquier elemento mientras PxGuard está activo, el margen, el relleno, el borde y las dimensiones exactas en píxeles aparecen como una superposición en vivo con código de colores — sin necesidad de DevTools. Es la misma información, disponible sin interrumpir tu flujo.

Complementa esto revisando los patrones de espaciado CSS que rompen los layouts — muchos bugs de espaciado son bugs del modelo de caja disfrazados.

Lista de verificación práctica

Antes de culpar a un framework o llamar “comportamiento extraño de CSS” a un bug de layout, recorre esta lista:

1. ¿Está box-sizing: border-box establecido globalmente?
2. ¿El elemento es block, inline o inline-block — y coincide eso con tu intención?
3. ¿Los márgenes adyacentes están colapsando cuando esperas que se sumen?
4. ¿Un elemento inline está ignorando el margin vertical?
5. ¿El tamaño renderizado en DevTools coincide con tu modelo mental?

Cinco preguntas. La mayoría de los bugs de layout se resuelven solos en la pregunta tres.

Qué leer a continuación

Una vez que el modelo de caja encaja, mucho “CSS raro” deja de serlo. Por qué padding y margin se comportan distinto dentro de contenedores flex, por qué overflow: hidden cambia en silencio el colapso de márgenes, por qué algunos elementos simplemente no aceptan un ancho: nada de eso es material nuevo que memorizar. Es este mismo modelo apareciendo en otro contexto.

Si también verificas accesibilidad junto a tu trabajo de layout, los chequeos de contraste WCAG son otra cosa que puedes hacer sin salir de la página.

Instala PxGuard gratis →