外边距不是会合并吗
来源：3-4 编程练习
抓住这只猪
2019-04-19 17:51:40
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<title>慕课网</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
width:610px;
margin: 0 auto;
border: 1px solid gray;
overflow: hidden;
zoom:1;
}
.d{
width:180px;
height:100px;
border: 1px solid gray;
float: left;
margin: 10px;
}
img{width:180px;
height:80px;
}
span{display: block;
text-align:center;
font-size: 10px;
font-family: "宋体";
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="main">
<!--第一行-->
<div class="d">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" alt="慕课网"/>
<span>欢迎来到慕课网学习新知识！</span>
</div>
<div class="d">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<span>欢迎来到慕课网学习新知识！</span>
</div>
<div class="d">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<span>欢迎来到慕课网学习新知识！</span>
</div>
<!--第二行-->
<div class="d">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" alt="慕课网"/>
<span>欢迎来到慕课网学习新知识！</span>
</div>
<div class="d">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<span>欢迎来到慕课网学习新知识！</span>
</div>
<div class="d">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<span>欢迎来到慕课网学习新知识！</span>
</div>
</div>
</body>
</html>
正常来说不是垂直方向，两个相邻的元素都设置外边距时，外边距会合并吗，那我上下两行的距离应该是10px呀，而且我也想水平方向上间距都为10px，要怎么做到呢。
1回答
-
同学你好，对于常规元素，外边距会发生合并， 但是对于脱离文档流的元素，外边距不会发生合并
这里为每个div设置浮动，脱离了文档流， 所以外边距不会发生合并
同学可以给每个div设置margin: 5px；实现上下左右的间距为10px. 注意这个时候需要调整大盒子的宽度， 示例：
如果帮助到了你，欢迎采纳
祝学习愉快~~~
0
相似问题