Margin collapsing no Box Model §

---

Margin collapsing (ou colisão de margens) é um comportamento específico do modelo de caixa no CSS que ocorre quando as margens de dois elementos adjacentes se sobrepõem, resultando em uma margem final maior do que a margem individual de qualquer um dos elementos.

A colisão de margens ocorre nas seguintes situações:

1. Elementos irmãos adjacentes: Quando dois elementos irmãos estão posicionados verticalmente um após o outro, as margens verticais entre eles podem se sobrepor, levando à colisão.
2. Não há borda ou padding entre as margens: A colisão ocorre quando não houver borda, padding, parte inline ou contexto de formatação de bloco para separar as margens, elas colapsam.

O comportamento padrão da colisão de margens segue algumas regras:

• A maior das margens verticais é escolhida como a margem resultante entre os elementos.
• Se ambas as margens são positivas, a margem resultante é a maior delas.
• Se ambas as margens são negativas, a margem resultante é a mais negativa (mais próxima de zero).
• Se uma margem é positiva e a outra é negativa, a colisão é resolvida subtraindo a menor margem da maior.

Exemplo §

.elemento1 {
  margin-bottom: 20px;
}
 
.elemento2 {
  margin-top: 30px;
}

<div class="elemento1">
  Conteúdo do Elemento 1
</div>
 
<div class="elemento2">
  Conteúdo do Elemento 2
</div>

Neste exemplo, as margens entre elemento1 e elemento2 irão colidir, resultando em uma margem final de 30 pixels (a maior entre as duas).

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado