Comportement des marges

Bonjour,

Je n'arrive pas à comprendre le comportement ci dessous.

.conteneur {
  padding-top: 20px;
  padding-left: 15px;
  background-color: black;
}
.bloc {
  border: 1px solid black;
  margin-top: 200px;
  padding-top: 2px;
  width: 100px;
  height: 100px;
  background-color: yellow;
} 

<div class="conteneur"><div class="bloc">Interne</div></div>

Pourquoi dans le cas ci-dessus le margin-top: 200px; n'est pas appliqué au dessus de la boite jaune ?

.conteneur {
  padding-left: 15px;
  background-color: black;
}
.bloc {
  border: 1px solid black;
  margin-top: 200px;
  padding-top: 2px;
  width: 100px;
  height: 100px;
  background-color: yellow;
} 

<div class="conteneur"><div class="bloc">Interne</div></div>

Dans le cas ci-dessus nous somme dans le cas d'une fusion de marge. Ceci me semble assez obscure. Quel est le but de ce comportement ?

Merci