Dominando margin collapsing

As margens superior e inferior dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como margin collapsing. Note que as margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
 

Margin collapsing ocorre em três casos básicos:

Irmãos adjacentes
As margens de irmãos adjacentes são colapsadas (execeto quando  o último irmão precisar ser limpado devido ao uso de floats  em elementos anteriores ). Por exemplo:
 <p>A margem inferior deste parágrafo é colapsada...</p>
 <p>... com margem superior deste parágrafo.</p>
Pai e primeiro/último filho
Se não houver border, padding, parte inline, contexto de formatação de bloco criado ou livre para separar o margin-top de um bloco do margin-top do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, height, min-height, ou max-height (en-US) para separar o  margin-bottom de um bloco do margin-bottom do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.
 
Blocos vázios
Se não houver border, padding, conteúdo inline, height, ou  min-height para separar um bloco margin-top de sua margin-bottom, então as margens superior e inferior são colapsadas.
 

Algumas coisas podem ser observadas:

  • Margin collapsing mais complexo (de mais de duas margens) ocorrem quando esses casos são combinados.
  • Essas regras se aplicam até mesmo a margens que são zero, portanto a margem e um primeiro/último filho termina fora de seu pai(de acordo com as regras acima) sendo a margem do pai zero ou não.
  • Quando margens negativas são envolvidas, o tamanho da margem colapsada é a soma da maior margem positiva e da menor margem negativa(a mais negativa).
  • Se ambos são negativos, o valor negativo maior será usado. Essa definição se aplica a elementos adjacentes e a elementos aninhados. 

Margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.

Especificações

Espeficicações Status Comentário
CSS Level 2 (Revision 1)
The definition of 'margin collapsing' in that specification.		 Recomendação Definição inicial

Veja Também