As propriedades da margem especificam a largura da área da margem de uma caixa. Em uma página com 3 áreas principais (cabeçalho, artigo e ao lado), onde seu layout requer uma margem de 20px entre elas, você pode acabar com algo como:

<header>
</header>
<article>
</article>
<aside>
</aside>

article {
  margin: 20px 0; 
}

Agora pense em uma mudança de layout, queremos remover o artigo, deixando o cabeçalho e de lado com uma margem de 20px entre eles … não deve funcionar agora? É isso? Uma maneira adequada de fazer isso será pensar neles como blocos complementares com uma primeira margem adicionada ao segundo com um total de 20px … MAS ISSO ESTÁ ERRADO – na maioria dos casos .

De acordo com w3c spec, duas margens adjacentes serão colapsadas e o valor mais alto delas será a margem final entre esses blocos. Por exemplo, com a seguinte definição de estilo, a margem entre o cabeçalho e o artigo deve ser de 20px e entre o artigo e a parte lateral será de 30px.

header {
  margin: 20px 0; 
}
article {
  margin: 10px 0;
}
aside {
  margin: 30px 0;
}

Não recolhível

As margens de recolhimento não ocorrerão quando um ou mais elementos de bloco tiverem:
1. Preenchimento ou borda;
2. Posicionamento relativo ou absoluto, flutuar para a esquerda ou direita;