3-4练习老师帮我看看嘻嘻 还有需要改进的地方吗
来源：3-4 编程练习
原来是晓琪_
2019-04-15 16:03:33
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
*{margin: 0;padding: 0;}
.container{width: 820px;
border:gray 1px dashed;
overflow: hidden;
zoom:1;
margin: auto;}
.one,.two,.three,.four,.five,.six{
float:left;
margin: 15px;
padding: 0px;
border:gray 1px solid; }
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="one">
<div class="tp"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
</div>
<div class="wz">欢迎来到慕课网学习新知识！</div>
</div>
<div class="two">
<div class="tp"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div>
<div class="wz">欢迎来到慕课网学习新知识！</div>
</div>
<div class="three">
<div class="tp"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
<div class="wz">欢迎来到慕课网学习新知识！</div>
</div>
<div class="four">
<div class="tp"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div>
<div class="wz">欢迎来到慕课网学习新知识！</div>
</div>
<div class="five">
<div class="tp"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg
"></div>
<div class="wz">欢迎来到慕课网学习新知识！</div>
</div>
<div class="six">
<div class="tp"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
<div class="wz">欢迎来到慕课网学习新知识！</div>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕星星
2019-04-15
同学你好，实现效果中可以看到图片与边界之间的距离和图片与图片之间的距离是不相等的：
是因为每个小盒子设置的四周的margin值，这样两个小盒子之间的间距就是会与边界距离的2倍，可以在外面大盒子中添加相同的padding值，如下：
可以重新测试下。
祝学习愉快！欢迎采纳~
0
相似问题
回答 1
回答 1
回答 1
回答 2
回答 1