Estilos CSS: Dominando el modelo de caja

El modelo de caja es el sistema con el que CSS calcula el tamaño y el espaciado de cada elemento. Parece trivial, pero es la fuente número uno de layouts impredecibles: un width: 50% que termina midiendo más de la mitad, dos columnas que no encajan, márgenes que desaparecen sin razón aparente. Todos esos síntomas se explican entendiendo cómo el navegador compone una caja.

Esta es la tercera entrega de la serie Estilos CSS. Analizaremos las cuatro regiones de una caja, el cambio de comportamiento que introduce box-sizing, el control de overflow, el manejo de alturas, el centrado vertical y el colapso de márgenes.

Las cuatro regiones de una caja

Todo elemento HTML se compone, de adentro hacia afuera, de cuatro capas:

• content — el área donde vive el contenido (texto, imágenes).
• padding — el espacio interno entre el contenido y el borde.
• border — el borde que rodea el padding.
• margin — el espacio externo que separa la caja de sus vecinos.

<div class="caja">content + padding + border + margin</div>

box-sizing: content-box vs border-box

La propiedad box-sizing decide qué incluye el width y el height que declaras.

• content-box (valor por defecto) — width y height miden solo el contenido. El padding y el border se suman por fuera, agrandando el tamaño final.
• border-box — width y height miden el conjunto de contenido + padding + border. El tamaño que declaras es el tamaño real renderizado.

Mira dos cajas con width: 200px y padding: 20px, una con cada modelo:

.content-box { box-sizing: content-box; } /* ancho real: 200 + 40 = 240px */
.border-box  { box-sizing: border-box;  } /* ancho real: 200px */

Por eso es práctica recomendada activar border-box de forma global, heredándolo para no romper estilos de terceros:

:root { box-sizing: border-box; }

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

Alturas: el flujo normal manda

La altura de un contenedor es orgánica por defecto: la define su contenido, no el contenedor. Esto tiene dos consecuencias prácticas:

• Definir height en porcentaje rara vez funciona, porque se refiere a la altura del padre, que a su vez depende de su contenido.
• Para que un height: 100% funcione, el padre necesita una altura explícita en unidades absolutas.

En lugar de fijar alturas, prefiere restringir el rango con min-height y max-height, dejando que el contenido fluya:

.panel { min-height: 6em; max-height: 12em; }

overflow: qué hacer cuando el contenido se desborda

Cuando el contenido excede el tamaño de su caja, overflow define el comportamiento:

.recorte { overflow: auto; max-height: 5em; }

Puedes controlar cada eje por separado con overflow-x y overflow-y, aunque mezclar valores distintos suele dar resultados poco predecibles.

Centrado vertical

Centrar verticalmente fue durante años un dolor de cabeza en CSS. La propiedad vertical-align no sirve para esto: solo aplica a elementos inline y a celdas de tabla. Hoy tenemos varias soluciones según el escenario:

1. ¿Puedes usar la altura natural? Aplica un padding igual arriba y abajo.
2. ¿Necesitas altura fija? Usa display: table-cell con vertical-align: middle.
3. El caso general: usa flexbox.
4. ¿Una sola línea de texto? Usa line-height igual a la altura del contenedor.

La solución moderna por excelencia es flexbox, que centra en ambos ejes con tres declaraciones:

.centro {
  display: flex;
  align-items: center;     /* eje vertical */
  justify-content: center; /* eje horizontal */
  min-height: 8em;
}

Márgenes negativos

A diferencia de padding y border, los márgenes admiten valores negativos, lo que te permite tirar de un elemento hacia afuera de su posición natural o solaparlo con su vecino.

.solapado { margin-top: -1.5em; }

Colapso de márgenes (margin collapsing)

Cuando dos márgenes verticales se encuentran, no se suman: se colapsan, quedando solo el de mayor valor. Si un párrafo tiene margin-bottom: 30px y el siguiente margin-top: 20px, la separación entre ambos será de 30px, no 50px.

Hay varias formas de impedir el colapso cuando no lo deseas:

1. Aplicar overflow: auto (o cualquier valor distinto de visible) al contenedor.
2. Añadir un border o un padding entre los dos márgenes.
3. Usar un contenedor flotado, inline-block o con posición absoluta/fija.
4. Usar flexbox o grid: los márgenes entre ítems del layout no colapsan.
5. Los elementos con display: table-cell no tienen margen, así que no colapsan.

Conclusión

El modelo de caja deja de ser un misterio cuando interiorizas que box-sizing controla la aritmética del tamaño, que la altura es orgánica por naturaleza y que los márgenes verticales colapsan. Activar border-box de forma global y apoyarte en flexbox para el centrado elimina la mayoría de los problemas clásicos de maquetación.