在实战中发现子级在父级中设置margin-top的时候，会失效，而会附加在父级上，相信大家也会遇到过这种情况，那这是怎么回事呢？要如何解决呢？那么我们看一下例子吧：
HTML代码：
<body>
<div>
<p></p>
</div>
</body>
CSS代码：
*{margin:0;padding:0}
/*父元素*/
div{
width:400px;
height:400px;
background-color:blue;
}
/*子元素*/
p{
width:200px;
height:200px;
background-color:orange;
margin-top:40px;
}
效果图：
会发现子元素设置的margin-top作用与父容器上了，这其实是css外边距合并产生的。
那么解决方法如下：
1.给父容器box加overflow:hidden;属性
2.父容器box加border除none以外的属性
3.用父容器box的padding-top代替margin-top