¿Qué es el colapso de bordes en CSS?

El colapso de márgenes (margin collapsing) es un fenómeno en CSS donde los márgenes verticales de bloques adyacentes se combinan en uno solo. El tamaño de este margen combinado se determina como el valor máximo de los márgenes colapsados.

El colapso ocurre en los siguientes casos:

Entre elementos adyacentes: Los márgenes verticales de dos elementos vecinos se colapsan.
```
<p>Párrafo 1</p>
<p>Párrafo 2</p>
```
Si <p> tiene margin-bottom y margin-top respectivamente, estos márgenes pueden colapsar.
Entre un elemento padre y su primer/último hijo: Si el padre no tiene border, padding, display: flex, display: grid, overflow: hidden u otras propiedades que crean un contexto de formato, su margen superior puede colapsar con el margin-top del primer hijo. De manera similar, el margen inferior del padre puede colapsar con el margin-bottom del último hijo.
```
<div class="parent">
  <p class="child">Elemento hijo</p>
</div>
```
En un elemento vacío: Si un elemento no tiene contenido (height: 0, sin border ni padding), sus márgenes superior e inferior pueden colapsar entre sí.
```
<div class="empty"></div>
```

Tabla que ilustra los resultados del colapso:

Margen 1	Margen 2	Resultado del colapso
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

El colapso de márgenes solo ocurre en la dirección vertical (margin-top y margin-bottom). Los márgenes horizontales (margin-left y margin-right) nunca colapsan.

Existen formas de prevenir el colapso, como agregar border, padding, usar display: flex, display: grid, overflow: hidden o crear un nuevo contexto de formato del bloque con display: flow-root.