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

如图，为什么我给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;
}

---

因此推荐尽量优先使用padding来控制间距

---

CSS外边距合并

http://www.w3school.com.cn/css/css_margin_collapsing.asp