关于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解决



结果为：



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