Colapso entre margin-top e margin-bottom no CSS

Quem já trabalhou com CSS pode ter enfrentado um comportamento curioso: você define margin-bottom em um elemento e margin-top no elemento seguinte, espera uma soma das duas margens, mas o resultado é menor do que o esperado. Isso acontece por conta de um fenômeno chamado colapse de margins de elementos.

O que é o tal colapso de margins?

O colapso de margens ocorre quando margens verticais de dois elementos adjacentes “se fundem”, criando apenas um único espaço. Em vez de somar as margens, o navegador utiliza a maior delas.

Por exemplo:

• Elemento 1: margin-bottom: 30px;
• Elemento 2: margin-top: 20px;

Você esperaria um espaçamento de 50px entre os dois, certo? Mas o navegador aplica apenas 30px, pois essa é a maior margem entre as duas.

Quando o colapso de margens acontece?

O colapso acontece principalmente quando:

1. Dois elementos adjacentes possuem margens verticais (top/bottom).
2. O elemento filho tem margem e não está separado do pai por padding ou borda.
3. Um elemento está vazio e tem apenas margens verticais.

Como evitar o colapse de margens?

Se você deseja manter as margens separadas, pode usar algumas técnicas:

Adicionar padding ou border

Esses valores interrompem o colapso.

.elemento {
    padding-bottom: 1px; /* Interrompe o colapso */
}

Usar overflow no pai

Configurar overflow: hidden; ou auto no container também evita o colapso.

Usar display diferente de block

Elementos com display: inline-block ou flex não sofrem colapso de margens.

Visualizando na Prática

Crie dois elementos para testar o colapso:

<div class="elemento-1"></div>
<div class="elemento-2"></div>

.elemento-1 {
    height: 50px;
    background: blue;
    margin-bottom: 30px;
}

.elemento-2 {
    height: 50px;
    background: red;
    margin-top: 20px;
}

• Resultado esperado: 50px de distância.
• Resultado real: 30px (por conta do colapso).

Agora, adicione um padding ou border a qualquer elemento para resolver:

.elemento-1 {
    height: 50px;
    background: blue;
    margin-bottom: 30px;
    padding-bottom: 1px; /* Previne o colapso */
}

O colapso de margins é um comportamento importante a ser entendido no CSS. Embora possa parecer confuso no início, aprender a lidar com ele ajuda a criar layouts mais previsíveis e consistentes.

Lembre-se: quando se trata de margens verticais, o maior valor sempre vence!