1.理解什么是margin塌陷
先看一个demo
效果图如下
给parent1加上
margin-top: 20px;
下面橙色区域是margin-top,此时是相对于body的(其实body也有默认margin,为8,此时取body和parent1的最大值,这为margin合并)
接下来给parent2加上
margin-top:20px;
parent2相对于parent1整体向下滑动20px,parent1不变化;
接下来,我们把children1加上
margin-top:8px;
我们可以看到1和3处没有变化,只有2处向下移动8px;从上面的列子可以看到,parent1的margin是相对于body的,而parent2的margin是相对于parent1的,chidren1的margin是相对于body的,chidren2的margin是相对于chidren2的,chidren2的margin是相对于parent1的。总而言之,body下的第一个元素和第一个元素下的第一个元素margin都是相对于body的(margin-top大于8px会出现margin塌陷),body下其他元素(包括其第一个子元素)则是margin相对于上一个元素,body下其他元素不包括第一个元素则是margin相对于上一个子元素。当出现第一个子元素margin大于默认值时(body默认8px,div没有默认值),子元素会带着父元素走动,这种现象就做margin塌陷。
2.解决margin塌陷问题
①给父元素加上overflow:hidden;
给parent1和parent2加上之后,margin-top:8px;出现了。
②为父盒子设置border,为外层添加border之后父子盒子就不是真正意义上的贴合了
可以看到设置border: 1px solid red;之后,同样达到效果
③为父元素设置paddin值
可以看到我给父元素设置了padding: 5px;之后,达到要求。
④设置position:fixed;
当给parent1设置了如下参数之后,达到效果。
⑤给父元素设置display:table;
给parent1设置了display:table;