这边写了个静态的供参考
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.mybox {
background-color: cornflowerblue
width: 100px
height: 100px
margin: 10px
float:left
}
.bbox {
width: 100px
height: 100px
margin: 10px
float:left
}
</style>
</head>
<body>
<div style="width:500px">
<div >
<div class="mybox">1</div>
<div class="mybox">2</div>
<div class="mybox">3</div>
<div class="mybox">4</div>
<div class="mybox">m</div>
<div class="bbox">m</div>
<div class="bbox">m</div>
<div class="mybox">m</div>
<div class="mybox">m</div>
<div class="bbox">m</div>
<div class="bbox">m</div>
<div class="mybox">m</div>
<div class="mybox">a</div>
<div class="mybox">b</div>
<div class="mybox">c</div>
<div class="mybox">d</div>
</div>
</div>
</body>
</html>
两个DIV之间的空隙通常情况下是由于容器溢出或者主动设置空隙造成。容器溢出的原因是：
1、DIV内元素高度或者宽度总和比设置的DIV的Height或者Width参数要大，还有就是浏览器对DIV参数的解析造成（比如在IE7中，设置一个DIV
float:right，如果再设置其margin-right:XXXpx，则有可能会产生右边实际margin-right:2xxxpx的效果）。再有就是未设置某项值时，系统默认值导致。楼主的图片中极有可能是由于内部元素没有设置margin-top参数或者margin-top设置过大，导致上层div溢出。
2、由于两个相邻div之间主动设置了margin空隙，如图，div2（也就是下面的动画或者图片所在的DIV）设置了margin-top大于0的情况。就会导致两个DIV之间存在空隙。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）