为什么上下两行的盒子外边距是相加显示的？
<!DOCTYPE html>
<html>
<head>
<title>2 row 3 column</title>
<meta charset="UTF-8">
<style type="text/css">
*{margin:0;padding:0;}
.container{
width:810px;
margin:0 auto;
border:1px dotted gray;
overflow: hidden;
zoom:1;
}
.pic1,.pic2,.pic3,.pic4,.pic5,.pic6{
margin: 20px 0px 20px 20px;
border:1px solid gray;
float:left;
}
.word{
padding-left:10px;
font-size: 16px;
line-height: 2em;
}
</style>
</head>
<body>
<div class="container">
<div class="pic1">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
<p class="word">欢迎来到慕课网学习新知识！</p>
</div>
<div class="pic2">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
<p class="word">欢迎来到慕课网学习新知识！</p>
</div>
<div class="pic3">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
<p class="word">欢迎来到慕课网学习新知识！</p>
</div>
<div class="pic4">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
<p class="word">欢迎来到慕课网学习新知识！</p>
</div>
<div class="pic5">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
<p class="word">欢迎来到慕课网学习新知识！</p>
</div>
<div class="pic6">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
<p class="word">欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>我这代码实现的效果图中间的空白位置很宽，如何改进呢？其他地方还有什么需要改进的吗？
0
收起
正在回答
1回答
你好同学 , 因为第一行图片盒子下边距20px与第二行盒子的上边距20px加起来为40px , 所以间距比其他地方宽 , 可以如下修改:
完善一下吧 , 祝学习愉快 ,望采纳 .
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星