老师，请看下，为什么我这个边框始终离图片有点距离呢
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com//53edadad0001efe202000070.jpg" >
</div><!--logo结束-->
<div class="nav">
<ul>
<li>关于我们</li>
<li>帮助中心</li>
<li>产品价格</li>
<li>解决方案</li>
<li>产品特色</li>
<li>首页</li>
</ul>
</div><!--nav结束-->
</div><!--header结束-->
<div class="picture">
<img src="http://img1.sycdn.imooc.com//53edad1600019ae910000310.jpg">
</div><!--picture结束-->
<div class="scroll-news">
<div class="scroll">滚动新闻</div>
<div class="news">这是滚动新闻</div>
</div><!--scroll-news结束-->
<div class="learn">
<div class="bootstrap">
<img src="http://img1.sycdn.imooc.com//53edad54000119fb03300130.jpg">
<div class="boot">学习bootstrap</div>
</div>
<div class="activity">
<img src="http://img1.sycdn.imooc.com//53edad690001260a03300130.jpg">
<div class="boot">企业网址实例</div>
</div>
<div class="shishi">
<img src="http://img1.sycdn.imooc.com//53edad7a0001cde803300130.jpg">
<div class="boot">javascript基础</div>
</div>
</div><!--learn结束-->
</body>
</html>
body{margin:0;padding:0;}
.header{width:1000px;height:80px;margin:0 auto;}
.logo{float:left;}
.nav ul li{list-style-type:none;float:right;width:100px;line-height:80px;margin-right:20px;display:block;}
.scroll-news{width:1000px;height:30px;margin:0 auto;}
.scroll{width:20%;background:red;height:30px;color:white;float:left;}
.news{width:70%;background:grey;height:30px;color:white;float:left;}
.clear{clear:both;}
.learn{width:1000px;height:330px;overflow:hidden;margin-top:20px;padding:20px 0px;}
.bootstrap,.activity,.shishi{float:left;margin-left:3px;}
.boot{text-align:center;border:1px solid black;}
