【margin-top失效问题】

问题描述

两个嵌套关系的div，子区域margin-top失效不起作用

---

原因分析：

有两个嵌套关系的div，如果外层div的父元素
padding值为0，那么内层第一个div的margin-top或者
最后一个div的margin-bottom的值会“转移”给外层div，使父元素产生
上外边距

---

解决方案：

1. 在父层div加上：overflow:auto；
2. 删除margin-top，父层div加： padding-top；
3. 使用伪元素：在父级div上使用一个伪元素(如： ::before),给它一个空白内容，并应用display：table；属性；
   .parent::before {
   content: “”;
   display: table;
   }