O que é o colapso de margens e para que serve?

O colapso de margens (margin collapsing) é um mecanismo em CSS onde as margens verticais de dois ou mais elementos de bloco adjacentes, bem como do elemento pai e do primeiro/último filho, não se somam, mas colapsam numa única margem igual à maior delas.

O colapso ocorre nos seguintes casos:

• Elementos adjacentes: O margin-bottom superior de um elemento e o margin-top do elemento seguinte.
• Pai e primeiro/último filho: margin-top do pai e margin-top do primeiro filho; margin-bottom do pai e margin-bottom do último filho. Acontece se não houver borda (border), preenchimento (padding), conteúdo inline (inline) entre eles ou se o pai não for um contêiner flex/grid.
• Blocos vazios: margin-top do elemento e seu margin-bottom, se não tiver conteúdo, borda ou preenchimento.

Exemplo de elementos adjacentes:

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

Neste caso, a distância entre os elementos será de 30px, não 50px.

Exemplo de pai e primeiro filho:

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

A distância do topo do pai até seu conteúdo será de 40px.

Para que serve:

O colapso de margens ajuda a manter distâncias verticais previsíveis entre blocos no fluxo normal do documento, evitando espaços excessivos. Simplifica a criação de uma ritmica tipográfica coerente, pois os designers podem especificar margens para parágrafos ou cabeçalhos independentemente, e o navegador cuidará de unir corretamente os espaços.

Como prevenir o colapso:

• Adicionar borda (border) entre elementos ou entre o pai e o filho.
• Adicionar preenchimento (padding) entre elementos ou entre o pai e o filho.
• Usar a propriedade overflow com um valor diferente de visible no elemento pai.
• Tornar um elemento flutuante (float).
• Usar posicionamento absolute ou fixed.
• Transformar os elementos em contexto de formatação Flexbox ou Grid (elemento pai).
• Transformar o elemento em inline-block.

/* Prevenção para o pai e o filho */
.parent {
  border-top: 1px solid transparent; /* ou padding-top */
}

/* Prevenção para elementos adjacentes */
.element + .element {
  margin-top: 0; /* ou border-top */
}