Css. top vs margin-top

Заголовок
Много текста

И есть два css параметра: top и margin-top.

Нужно задать отступ от верхнего края div. и чтобы при изменении размеров окна родительский див растягивался в зависимости от количества текста.

НО если использовать top, то при уменьшении размеров окна div 2 вываливается из родительского блока на величину top 1 + top 2, а после этого растягивается как и положено. С margin-top все растягивается отлично.

Можно ли достичь такого же нормального отображения и с top?

Для margin-top отступом является расстояние от внешнего края верхней границы текущего элемента до внутренней границы его родительского элемента.

Для top - отступом является расстояние от верхнего края родительского элемента до верхнего края дочернего элемента.
И здесь всё зависит от того как задано для дочернего элемента свойство position. Если - absolute, то родительским окном является окно браузера, если relative, то top отсчитывается от верхнего края исходного положения элемента.

Если я вас окончательно не запутал, то вы уже догадались, что это очень разные свойства.