¿Qué es el colapso de márgenes y para qué se utiliza?

El colapso de márgenes (margin collapsing) es un mecanismo en CSS en el que los márgenes verticales de dos o más elementos de bloque adyacentes, así como del elemento padre y su primer/último hijo, no se suman, sino que se colapsan en un solo margen igual al mayor de ellos.

El colapso ocurre en los siguientes casos:

• Elementos adyacentes: El margin-bottom superior de un elemento y el margin-top del siguiente.
• Padre y primer/último hijo: margin-top del padre y margin-top del primer hijo; margin-bottom del padre y margin-bottom del último hijo. Ocurre si entre ellos no hay borde (border), relleno (padding), contenido en línea (inline) o si el padre no es un contenedor flex/grid.
• Bloques vacíos: margin-top del elemento y su margin-bottom, si no tiene contenido, borde o relleno.

Ejemplo de elementos adyacentes:

<div style="margin-bottom: 20px;">Elemento 1</div>
<div style="margin-top: 30px;">Elemento 2</div>

En este caso, la distancia entre los elementos será de 30px, no 50px.

Ejemplo de padre y primer hijo:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Elemento hijo</div>
</div>

La distancia desde el borde superior del padre hasta su contenido será de 40px.

Para qué se usa:

El colapso de márgenes ayuda a mantener distancias verticales predecibles entre bloques en el flujo normal del documento, evitando espacios excesivos. Simplifica la creación de una ritmica tipográfica coherente, ya que los diseñadores pueden especificar márgenes para párrafos o encabezados independientemente, y el navegador se encargará de combinar correctamente los espacios.

Cómo prevenir el colapso:

• Agregar borde (border) entre elementos o entre el padre y el hijo.
• Agregar relleno (padding) entre elementos o entre el padre y el hijo.
• Usar la propiedad overflow con un valor distinto a visible en el elemento padre.
• Hacer que un elemento sea flotante (float).
• Usar posicionamiento absolute o fixed.
• Convertir los elementos en un contexto de formato Flexbox o Grid (elemento padre).
• Convertir el elemento en inline-block.

/* Prevención para el padre y el hijo */
.parent {
  border-top: 1px solid transparent; /* o padding-top */
}

/* Prevención para elementos adyacentes */
.element + .element {
  margin-top: 0; /* o border-top */
}