怎么后面的间距怎么为20px?不是说外边距的总距离为最大值嘛？应该为10px啊。现在都相加了！
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
*{margin:0;padding:0;}
.box{width:800px; margin:30px auto; overflow: hidden;border: 1px solid red;}
li p{text-align: center;}
li{list-style: none;float:left;margin:10px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<ul class="box">
<li style="margin-left:10px">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li>
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li>
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li style="margin-left:10px">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li>
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li>
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</li>
</ul>
</body>
</html>
正在回答
同学你好，非常抱歉之前的老师回答的有点问题。
1、外边距的总距离为最大值，这是元素在文档流中的情况。例如：
2、当前代码中元素设置了浮动，脱离文档流，外边距不是取最大值了，是相加的结果。所以第一个和第二个元素之间的间距是10+10=20px
可以再测试理解下，祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星