親となるブロック要素の、最初の子要素にmargin-topがあると
親ブロック要素そのものの位置が変わってしまうように見えるのはなぜでしょうか

* { margin: 0; padding: 0; }
div.parent { background-color: pink; }
p.child { background-color: green; margin-top: 30px; }
p.test { background-color: blue; }

<div class="parent"><p class="child">child</p></div>

上のように書くと、divの座標自体が30px分下にずれてしまいます
最初に30pxの高さのdivの背景色pinkが、次に背景色greenのpの領域が、表示されるものとばかり考えていました

<div class="parent"><p class="test">test</p><p class="child">child</p></div>
このように最初の子要素にmarginを持たない<p>が入る場合は期待通りになります