¿Qué es el colapso de márgenes en CSS y cómo puedo evitarlo?

El colapso de márgenes en CSS es un comportamiento específico que ocurre cuando los márgenes verticales (es decir, margin-top y margin-bottom) de dos o más elementos de bloque (block-level elements) adyacentes se combinan (o «colapsan») en un solo margen.

El tamaño del margen resultante será el del mayor de los márgenes que colapsan.

Es importante destacar que esto solo sucede con los márgenes verticales; los márgenes horizontales (margin-left y margin-right) nunca colapsan.

Situaciones comunes donde ocurre el colapso de márgenes:

1. Márgenes de elementos hermanos adyacentes: El margin-bottom de un elemento de bloque colapsa con el margin-top del siguiente elemento de bloque hermano que le sigue inmediatamente.
2. Márgenes entre un elemento padre y su primer/último hijo: Si no hay border, padding, contenido en línea (inline content), «clearance» (para elementos flotantes) o se ha creado un nuevo contexto de formato de bloque entre el margin-top del elemento padre y el margin-top de su primer hijo, estos dos márgenes colapsarán. Lo mismo ocurre entre el margin-bottom del padre y el margin-bottom de su último hijo.
3. Márgenes de un bloque vacío: Si un elemento de bloque no tiene border, padding, contenido en línea, height o min-height que separe su margin-top de su margin-bottom, entonces sus propios márgenes superior e inferior colapsarán entre sí.

¿Cómo se puede evitar el colapso de márgenes?

Evitar el colapso (especialmente el que ocurre entre padre e hijo, que suele ser el más problemático) se puede lograr de varias maneras. Aquí algunas de las más comunes para el caso padre-hijo:

• Añadir padding o border al elemento padre: Incluso un padding o border muy pequeño (ej. padding-top: 1px; o border-top: 1px solid transparent;) en el borde relevante del elemento padre evitará que sus márgenes colapsen con los de sus hijos.
• Crear un nuevo contexto de formato de bloque (BFC) en el elemento padre: Un elemento que establece un nuevo BFC no permitirá que sus márgenes colapsen con los de sus hijos. Formas de crear un BFC en el padre incluyen:
  • display: flow-root; (la forma más moderna y "limpia" para crear un BFC con este propósito).
  • overflow: auto; o overflow: hidden; (o cualquier valor distinto de visible y clip).
  • display: inline-block;
  • display: flex; o display: grid; (los contenedores flex y grid establecen nuevos BFC para sus contenidos).
  • position: absolute; o position: fixed;
  • float: left; o float: right; (aunque esto introduce otros comportamientos de layout).

Ejemplo para evitar colapso entre padre e hijo:

.elemento-padre {
  background-color: lightgrey; /* Para visualización */
  /* Opción 1: Añadir un padding o borde sutil */
  /* padding-top: 1px; */

  /* Opción 2: Crear un nuevo BFC de forma moderna */
  display: flow-root;
}

.elemento-hijo {
  margin-top: 30px; /* Este margen ahora no colapsará con el del padre */
  height: 50px;
  background-color: lightblue;
}Lenguaje del código: PHP (php)

Para los elementos hermanos adyacentes, el colapso es a menudo el comportamiento deseado, ya que proporciona un espaciado natural (por ejemplo, entre párrafos).

Si necesitas un espacio exacto entre ellos que no se colapse, podrías usar padding en uno de ellos en lugar de margin, o envolverlos en contenedores que establezcan un BFC o usen Flexbox/Grid para el espaciado.