CSS no Lanche

Você provavelmente já deve ter passado por esse tipo de situação, onde as margens do elemento (top e bottom) se fundem formando uma só margem. Esse fenômeno é chamado de Margin Collapsing. Se você não entendeu o fenômeno, observe a imaghem abaixo, duas divs em seu fluxo normal no documento HTML:

A primeira div possui 10px de margin-bottom e a segunda div possui margin-tpo com o valor de 10px, você então, pegando uma calculadora e somando 10px+10px chegaria ao valor de 20px certo? Mas isso não é o que ocorre, as margens se fundem formando uma só:

Isso ocorre em 3 casos básicos:

Irmãos adjascentes

As margens de irmãos adjascentes se fundem (exceto quando o último irmão tem a função de limpar floats). Exemplo:

<p>A margem inferior desse parágrafo...</p>
<p>...se funde com a margem superior desse parágrafo.</p>

Pai, primeiro e último filho

Caso não exista borda, padding, conteúdo ou alguma forma de “limpeza de floats” para separar a margin-top da margin-top de seu primeiro filho, ou nenhuma borda, padding, conteúdo, height, min-height ou max-height para separar a margin-bottom da margin-bottom de seu último filho, essas margens se fundem. A margem que se funde acaba saindo para fora de seu elemento pai.

Blocos vazios

Caso não exista borda, padding, conteúdo, height ou min-height para separar as magin-top da margin-bottom de um bloco, essas margens superior e inferior acabam se fundindo. Os casos mais complexos de margin collapsing (de mais de duas margens) ocorrem quando esses casos são combinados.

Estas regras são aplicáveis a margens ainda mesmo com o valor igual a 0, por isso a margem de um primeiro/último filho acaba fora de seu pai (de acordo com as regras acima) ou não se a margem de seu pai for igual a zero.

Quando são envolvidas margens negativas, o valor das margens que se fundem é calculado da seguinte forma: Soma-se o valor da maior margem positiva com o valor da menor (mais negativa) margem negativa.

Margens de elemento com float e elementos com posicionamento absoluto nunca se fundem.

Esse artigo foi escrito com base no artigo da Mozilla Developer Center.