непонятност о margin-top е
 

приветствую
уже час смотрю и ничего не понимаю

<div style="width: 100px; height: 500px; background-color: #000">
	<div style="width: 100px; height: 100px; background-color: #ccc; margin-top: 200px"> </div>
</div>

margin-top ето же отступ дочерного елемента сверху от радителского, что в етот коде ошибка, обясните плиз. здес отпускается с верху родителски елемент от верхного края браузера, (а не дочерни див от радителского)
почему?

Я лично хз почему так (вроде тут и тут про это написано)

Но если родительскому блоку добавить

border: 1px solid;

или

overflow: hidden;

То будет нормально работать.