html中子div盒子margin-top失效问题

html与css所谓是前端开发的重点，学习html和css需要记住各种标签及用法，其中难免会遇到一些问题，这里我分享我遇到的一些问题及解决办法，希望对大家有所帮助！

(一)magin-top失效问题

1.父子div间magin-top失效

下面对比一下设置magin-top前后效果我们发现box2设置了magin-top:100px;并没有发挥作用，反而是未设置magin-top的box1有了margin-top：100px的效果

未设置margin-top

设置margin-top

W3Cschool中找到相关的解释：外边距合并，当2个垂直外边距相遇时，他们将形成一个外边距。合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。

!外边距合并的条件

∆当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

∆当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

∆当一个空元素没有边框或填充时，上下外边距碰到了一起，也会发生合并。

解决方法:

1.父元素设置overflow: hidden;

设置overflow:hidden;

2.父元素设置内边距

设置padding

3.父元素设置边框

设置border

4.子元素设置绝对定位

设置position

四种方式都可以避免外边距合并问题，建议使用overflow:hidden;方式，改动改动及影响较小，实际情况用对应的方法。