问题： 给一个div添加margin-top发现效果作用在了父元素上，就是说，看起来是父元素加了margin
html:
<body>
<div class="partner">
<div class="child"></div>
</div>
</body>
style:
body{
background:#dddddd;
margin:0;
padding: 0;
}
.partner{
width:200px;
height:200px;
background:pink
}
.child{
width:100px;
height:100px;
background:burlywood;
}
此时没加margin,效果图如下：
未加margin
此时
div紧靠在左上角。
给.child添加margin-top:30px之后，我们设想的是子元素与父元素之间会有30px的间距，查看下方效果图发现，明显与我们设想不一致
添加margin-top
此时发现，父元素上方出现30px的距离。
原因：
所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、 Padding或Border分隔。 CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠
如何解决？
既然已经知道是
margin发生了重叠，并且知道了浮动元素和绝对定位元素不会出现margin折叠，那就让他们变成浮动或者定位元素就好了呀所以，我们可以用
padding代替margin,或者给父元素加border让两个元素分隔开，再或者你可以试试float、overflow、position呀
