O que é o colapso de bordas em CSS?

O colapso de margens (margin collapsing) é um fenómeno em CSS onde as margens verticais de blocos adjacentes se fundem numa só. O tamanho desta margem combinada é determinado como o valor máximo das margens que colapsam.

O colapso ocorre nos seguintes casos:

Entre elementos adjacentes: As margens verticais de dois elementos vizinhos colapsam.
```
<p>Parágrafo 1</p>
<p>Parágrafo 2</p>
```
Se <p> tiver margin-bottom e margin-top respetivamente, estas margens podem colapsar.
Entre um elemento pai e o seu primeiro/último filho: Se o pai não tiver border, padding, display: flex, display: grid, overflow: hidden ou outras propriedades que criam um contexto de formatação, a sua margem superior pode colapsar com o margin-top do primeiro filho. De forma semelhante, a margem inferior do pai pode colapsar com o margin-bottom do último filho.
```
<div class="parent">
  <p class="child">Elemento filho</p>
</div>
```
Em um elemento vazio: Se um elemento não tiver conteúdo (height: 0, sem border nem padding), as suas margens superior e inferior podem colapsar entre si.
```
<div class="empty"></div>
```

Tabela que ilustra os resultados do colapso:

Margem 1	Margem 2	Resultado do colapso
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

O colapso de margens ocorre apenas na direção vertical (margin-top e margin-bottom). As margens horizontais (margin-left e margin-right) nunca colapsam.

Existem formas de prevenir o colapso, como adicionar border, padding, usar display: flex, display: grid, overflow: hidden ou criar um novo contexto de formatação do bloco com display: flow-root.