¿Qué es el colapso de bordes en CSS?

El colapso de márgenes (margin collapsing) es un fenómeno en CSS en el que los bordes verticales de dos o más bloques adyacentes se combinan en un solo borde. El tamaño de este borde común se determina por el valor más grande de los bordes que colapsan.

Reglas principales del colapso:

• Solo los bordes verticales (margin-top y margin-bottom) colapsan. Los horizontales no.
• Solo colapsan los bordes de elementos adyacentes si no hay otros elementos, relleno (padding), borde (border) o contenido de bloque entre ellos.
• El borde superior del primer elemento hijo colapsará con el borde superior de su padre si no hay padding, border u otro contenido entre ellos.
• El borde inferior del último elemento hijo colapsará con el borde inferior de su padre si no hay padding, border u otro contenido entre ellos.
• Los bordes superior e inferior de un elemento vacío pueden colapsar entre sí si no tiene padding, border ni contenido.
• Si uno de los bordes que colapsan es negativo, el tamaño final será la suma del valor positivo y negativo (o el valor absoluto si ambos son negativos y la suma es menor que cero).

Ejemplo:

<div class="box1">Elemento 1</div>
<div class="box2">Elemento 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

En este caso, la distancia vertical entre box1 y box2 será de 30px (el valor máximo entre 20px y 30px), no 50px.

Formas de prevenir el colapso:

• Añadir padding o border entre los elementos.
• Crear un nuevo bloque de formato (por ejemplo, usando overflow: hidden, display: flow-root o elementos flotantes).
• Usar display: inline-block, display: flex o display: grid para los elementos.
• Usar posicionamiento absoluto.