请问，为什么元素与元素之间的margin外边距是20px，而不是10px？
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
*{padding:0px;margin:0px;}
p{margin-left:5px;}
.a,.b,.c,.d,.e,.f{border:1px #d3d3d3 solid;width:240px;margin:10px;}
.title{border:1px #d3d3d3 dashed;width:786px;overflow:hidden;}
.a,.b,.c,.d,.e,.f{float:left;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="title">
<div class="a">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="b">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="c">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="d">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="e">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="f">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
</body>
</html>
正在回答
同学你好，你说的合并的情况，是在设置底部外边距，和顶部外间距的情况，如果元素不设置浮动，他们的间隙是会合并在一起，但是元素里面设置了float:left，所以他们没有合并在一起，参考下图：
可以自己测试一下，祝学习愉快
同学你好，你想问的是，为什么给每块设置的是margin：10px，但是为什么每块之间的间隙是显示的是20px吗？
1、例如：给第一个块设置了margin：10px，给第二个块也设置了10px，那么这两个块儿的本身就会多占据上右下左10px的位置，所以之间的间隙就是20px了，如下图可以看得明白点：
红色线条是第一个块的margin-right：10px， 绿色线条是margin-left：10px，加一起就是10px了。
2、建议修改一下代码，因为块与块之间的间隙，跟块与整体边框的间隙要保持一致，可以给整体容器添加一个padding：10px，如下图：
希望解决了你的问题呀，祝学习愉快~
望采纳！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星