面试题：使子元素顶部距离父元素100px的坑

开始准备刷面试，自己记录一下

<div class="parent">
    <div class="child"></div>
</div>
 
.parent{
    height: 200px;
    width: 100%;
    background-color: green;
}
.child{
    height: 100px;
    width: 100%;
    background-color: blue;
}

若只在child下加上margin-top:100px; 这样的写法会导致父容器没有边框使得子元素的margin参考对象为body，从而使得parent和child一起向下移动100px 解决方案 1：父元素加上overflow:hidden形成BFC 2：父元素加上border: 1px solid #fff;