子元素设置margin-top为什么会作用在父元素上？

Question

如图，为什么我给p标签元素设置的margin-top会作用在div上面？<div class="test">    <p class="para">this is a para</p></div>* {    padding: 0;    margin: 0;}.test {    position: relative;    height: 400px;    width: 1000px;    margin: 0 auto;    margin-top: 0;    margin-bottom: 0;    background-color: #DCF1B8;}.para {    width: 20%;    margin-left: auto;    margin-right: auto;    background-color: #734E4E;    height: 50%;    margin-top: 100px;    margin-bottom: 100px;}