margin-to在不同的框里显示为什么不同？

Question

1. <div style="width:400px;height:400px;background: red;">

        <div style="width:200px;height:200px;background:blue;margin-top:10px;"></div>

    </div>

 2.    <div style="width:400px;height:400px;border:1px solid red;">

        <div style="width:200px;height:200px;border:1px solid blue;margin-top:10px;"></div>

 </div>

同样是设置margin-top为10px第一个div 是相对于html移动了10px；而第二是相对于自己的父div移动了10px；为什么会产生这样的差异？要是我想要第一个div里面的子div也相对于父div移动10px应该怎么设置？

Answer 1

边界叠加问题，在第一个案例系统做了2件事情1、判断元素无填充无边框等条件符合 然后就发生了边界叠加2、将子元素的margin过渡给父元素，即在突出外面显示（这是因为块级元素的计算方式造成的）边界叠加作用主要保证了元素之间距离的统一，造成混淆的时候处理下就好了解决方法：1、父元素加边框2、父元素填充（padding）3、父元素overflow:hidden4、子元素绝对定位（position:absolute）5、子元素float:left；