解析外边距塌陷问题规则
听说刚开始人们觉得margin 塌陷是个bug,后来渐渐地才发现,原来所有的浏览器都这样,所以就不算bug
要强调是的外边距的塌陷问题只会在垂直之间产生塌陷;水平之间不受影响的;
还有就是两个盒子的垂直外边距完全接触才会触发。
看下面做两个div,指定宽高:
对上面的进行margin-bottom:30px;
再对下面的盒子进行margin-top:10px后:
从标尺上可见他们之间的间隙仅仅多了30px;原因是垂直之间塌陷的原则是以两方最大的外边距为准,这里30为最大的一方,故外边距只是30px;
但是在一般情况下,垂直两个盒子出现这种情况下,比较少(并列)形式出现,因为没什么必要,直接针对一个来外边距就好,何苦上面给一点,下面给一点外边距。
出现情况比较多的是,嵌套关系的盒子。急需要我们去解决。
如图:
对里面的盒子进行margin-top:10px;后会出现这样状况:
可见外层div塌陷;
ok,如何解决呢?有两种方法,当然,看到有人用那里头的div进行padding空出位置,这里我们换方式,保持原代码基础上做动作。
解决方法:
1. 给大盒子(外层)指定一个边框。可以解决 (因为外层有border的话,他们两显然就不是紧贴在一起的了),如果不希望看到边框,可以改成背景色(我实验的背景色是白色)。
1
|
.waichen{border: 1px solid #fff ;}
|
2. 大盒子加溢出css:
1
|
overflow : hidden ;
|
这样的话,完美解决。