外边距合并问题

写demo的时候遇到这样一个问题

.p{ 
    width:150px;
    height:150px;
    margin:0px auto;
    background-color: yellow;
}
.c{
    width:120px;
    height: 120px;
    margin-top: 50px;
    background-color: pink;
}
<div class="p">
    <div class="c"></div>
</div>

demo-1.png

但是当父元素设置了padding或者border时，子元素的margin值就会在父元素内部

demo-2

    一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会
和其内部文档流中的第一个子元素的上边距重叠。
    父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding。
就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的border
或者padding就可以有效的管制这个目无领导的margin防止它越级，把自己的margin当领导的margin执行。
为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。

如果块级父元素中，不存在上边框、上内补、inline content、 清除浮动 这四条属性（对于上边框和上内补，也可以说，当上边距及上内补宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距合并 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
类似的，若块级父元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有父元素的 border、padding、inline content、height、min-height、 max-height 分隔时，就会发生下外边距合并现象。
margin-collapse