为什么图片的外边距距离父元素盒子距离和相邻元素之间的距离不同
来源：3-4 编程练习
慕虎1507818
2020-05-20 21:07:18
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
*{
margin:0;
padding:0;
}
.container{
width:800px;
border:1px #dcdcdc dashed;
overflow:hidden;
zoom:1;
}
.div{
margin:10px;
border:2px #d3d3d3 solid;
float:left;
}
p{
height:30px;
line-height:30px;
}
</style>
</head>
<body>
<div class="container">
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>写回答
3回答
-
好帮手慕码
2020-05-21
同学你好，回复一中也提到了：
即元素在文档流中的时候，边框才会合并（取二者中最大值）。如果是div设置浮动、脱离了文档流就不会发生边框合并的情况了。
祝学习愉快~
0 -
慕虎1507818
提问者
2020-05-21
那请问老师如何让外边距合并呢？
0 -
好帮手慕码
2020-05-21
同学你好，请问你是说如下图(红框圈出来)的间距为什么不一样吗?
因为第二个红框圈出来的不仅有第一张图的右外边距：
还有第二张图的左边外边距：
它两边距相加得出。另，这里的边距为什么没有合并呢？外边距的总距离为最大值，这是元素在文档流中的情况。例如：
同学的代码中，元素设置了浮动，脱离文档流，外边距不是取最大值了，是相加的结果。所以第一个和第二个元素之间的间距是10+10=20px。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题