关于给上边距出现的问题

Question

如下代码，我给p标签一个上部外边距为什么没反应，反而父级DIV跟着下来？这种属于什么现象？

  <div style = "background-color:yellow;height:200px;">
       <p style= "background-color:green;height:50px;margin-top:100px;">88888888888888888888</p>
        
    </div>

Answer 1

1.给父层添加：overflow:hidden;
2.给父层添加：border除none以外的属性
3.给父层添加：padding-top代替margin-top的效果。

Answer 2

查一下 合并外边距。

Answer 3

应该属于外边距合并, 如果想满足你的需求, 给外层div加padding-top

Answer 4

这个普通文档流的规则吧，详细了解的话建议查一下BFC布局规则
可以让父级触发bfc来搞这个。

1.float的值不为none；
2.overflow的值为auto,scroll,hidden之一；
3.display的值为table-cell，table-caption和inline-block之一；
4.position的值不为static或者relative中的任何一个。