解决margin-top或者margin-bottom无效的问题

问题： 给一个div添加margin-top发现效果作用在了父元素上，就是说，看起来是父元素加了margin
html:

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呀