### 一. 父元素中第一个子元素margin-top无效问题 **这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。** 如下: ``` <div class="parent"> <div class="child"></div> </div> ``` ``` * { padding: 0; margin: 0; } .parent { width: 200px; height: 100px; background: yellowgreen; } .child { width: 100px; height: 100px; background-color: aqua; margin-top: 30px; } ``` 显示效果如图：  此时，虽然设置了`.child`margin-top为30px, 但是父元素与子元素一起往下移了。 再说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。 ### 二. 解决办法： 1.给父元素加一个边框或者padding-top 2.给父元素加一个overflow: auto或者hidden 3.利用`before`伪类给父元素创建空白区域，使第一个子元素变成空table伪类，既可解决（推荐） 如： ``` .parent::before { display: table; content: ""; } ```