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

如图，为什么我给p标签元素设置的margin-top会作用在p上面？

<p class="test">
    <p class="para">this is a para</p>
</p>

* {
    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;
}