嵌套div的margin-top使用注意

第一种情况：
两个div，嵌套关系，也就是父子关系，没有任何的内容

各自的css样式如下：

实现的效果，如下：

第二种情况：

如果此时给父级元素加点内容，如图所示

各自的css的样式不变，最后的效果如图所示：

如果父元素没有内容，想要子元素离父元素有上边距怎么实现?

此时的效果:

修改代码:

此时的效果:

总结：所以在使用margin-top时我们需要多注意一下的