关于div嵌套margin-top影响父div的解决办法及各种情况测试

遇到的问题：
两个div嵌套，希望里面的div在父div中垂直移动，结果发现设置margin-top的时候，父div也一起移动，于是进行了以下测试：

目前有两个div ：拟定root div宽度为全屏 高度为50px
为了不影响测试，先将body的默认margin去除

结果为：

情况1：设置外div的margin-top=50px；

结果为：

下移50px；

情况2：设置外div的margin-top=50px；嵌套的div1（高度为20px 红色区域）的margin-top=100px；

结果为：

下移100px

情况3：只设置内div1的margin-top=100px

结果还是下移100px。

由此说明：
内div设置margin的时候不是根据父div的顶端来计算

接着进行下面的测试：
情况4：不设置外div的margin 设置内div1的margin为100px 设置内div2的margin为100px

结果是外div下移了100px

情况5：不设置外div的margin 不设置内div1的margin 设置内div2的margin为100px

结果为：

父div没有移动

由此说明：
HTML在计算div的margin的时候是根据第一个div设置的margin决定

所以在遇到两个div嵌套，希望里面的div在父div中垂直移动的时候可以加个1px高度的空div解决

结果为：

当然还有其他很多办法，希望大家多多搜集进而分享。