] Элемент с верхним краем имеет поле за пределами контейнера

У меня есть кое-что на этот счет:

#div {
   background: green; 
   width: 200px;
   height: 100px;
}

h1 {
   margin-top: 100px;
}

(И, очевидно, есть некоторый HTML, чтобы пойти с этим.)

Теперь при просмотре в браузере h1 отображается в самом верху #div , а поле 100px идет поверх #div ].

Кто-нибудь может предложить причину?

(Код слишком сложен для вставки соответствующих частей, поэтому, если никто не может дать мне ответ, я опубликую его, и, возможно, кто-то обнаружит ошибку или что-то.)