解决外边距塌陷
解析外边距塌陷问题规则
听说刚开始人们觉得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 ;
|
这样的话,完美解决。
demo
<!doctype html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style>
#d1,#d2{
width:200px;
height:200px;
background:red;
margin-bottom:-20px
}
#d2{
background:blue;
/*第一种方法*/
/*overflow: hidden;*/
}
#d3{
width:100px;
height:100px;
background:green;
margin-top:20px;
}
/*第二种方法*/
#d2:before{
content:"";
display:table;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2">
<!--
1、第一个子元素
2、内容为空
3、table元素 : display:table
-->
<!-- <table></table> -->
<div id="d3"></div>
</div>
</body>
</html>