为什么上下两行的盒子外边距是相加显示的？
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!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 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧