O que é o colapso de bordas em CSS?

O colapso de margens (margin collapsing) é um fenómeno em CSS onde as margens verticais de dois ou mais blocos adjacentes se unem numa única margem. O tamanho desta margem comum é determinado pelo valor mais alto das margens que colapsam.

Regras principais do colapso:

• Apenas as margens verticais (margin-top e margin-bottom) colapsam. As margens horizontais não.
• Apenas as margens de elementos adjacentes colapsam se não houver outros elementos, preenchimento (padding), borda (border) ou conteúdo de bloco entre eles.
• A margem superior do primeiro elemento filho colapsará com a margem superior do seu pai se não houver padding, border ou outro conteúdo entre eles.
• A margem inferior do último elemento filho colapsará com a margem inferior do seu pai se não houver padding, border ou outro conteúdo entre eles.
• As margens superior e inferior de um elemento vazio podem colapsar-se entre si se o elemento não tiver padding, border ou conteúdo.
• Se uma das margens que colapsam for negativa, o tamanho final será a soma dos valores positivos e negativos (ou o valor absoluto se ambos forem negativos e a soma for menor que zero).

Exemplo:

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

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

Neste caso, a distância vertical entre box1 e box2 será de 30px (o valor máximo entre 20px e 30px), não 50px.

Formas de evitar o colapso:

• Adicionar padding ou border entre os elementos.
• Criar um novo bloco de formatação (por exemplo, usando overflow: hidden, display: flow-root ou elementos flutuantes).
• Usar display: inline-block, display: flex ou display: grid para os elementos.
• Usar posicionamento absoluto.