как работает margin-top ?

[traxenbruxen]

Добрый день!

Я новичек в деле верстки, много не ругайте)

Мне надо сделать так, чтобы синий прямоугольник был опущен максимально вниз, к зеленому блоку. Пишу margin-top и пускается все вместе, хотя в описании margin написано что отступ идет от родительского элемента т.е. от предыдущего блока div.

подскажите как исправить и что я делаю не так? 

 

https://jsfiddle.net/traxenbruxen/2yjh09sp/

[Laroxx12]

Заменить 

                margin-top: 50px;

на 

                padding-top: 50px;

[antonKar]

подскажите как исправить и что я делаю не так? 

Это называется "Добро пожаловаться в волшебный мир танцев и плясок с бубном вёрстки", где не всё работает так, как вроде должно работать по логике.

[burokrat]

Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний отступ (паддинг) сверху или добавить рамку сверху.

[SelenIT]

что я делаю не так?

Пользуетесь свойством margin, не читая его спецификации (или хотя бы ее краткой выжимки).