2-6关于当中图片的问题

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{margin:0;padding:0;}
    .nav{width:100%;height:100px;background:black;
        position:fixed;top:0；
    }
    .img{float:left;}
    .con{color:white;display:inline;float:right;
    margin-left:30px;margin-right:30px;
    line-height:100px;}
    .pic{width:100%;}
    .pic1{padding-top:100px;}
    .pic3{padding-bottom:100px;}
    .bot{width:100%;height:100px;background:black;
    position:fixed;bottom:0;text-align:center;}
     
    .lis{display:inline;color:white;line-height:100px;
        padding:30px;
    }
 
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="nav">
      <div class="img">
          <a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></a>
      </div>
      <a href="#"><div class="con">课程</div></a>
      <a href="#"><div class="con">职业路径</div></a>
      <a href="#"><div class="con">实战</div></a>
      <a href="#"><div class="con">猿问</div></a>
      <a href="#"><div class="con">手记</div></a>
  </div>
  <div class="pic">
      <div class="pic1"><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"/></div>
      <div><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"/></div>
      <div class="pic3"><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"/></div>
      
  </div>
  <div class="bot">
      <ul class="ul">
          <li class="lis">网站首页</li>
          <li class="lis">企业合作</li>
          <li class="lis">人才招聘</li>
          <li class="lis">联系我们</li>
          <li class="lis">常见问题</li>
          <li class="lis">友情链接</li>
      </ul>
  </div>
   
</body>
</html>

三张图片之间有白色缝隙。请问怎样设置可以消除缝隙呢？

zqfay 2018-05-08

源自：CSS网页布局基础 2-7 编程练习

收起

1回答

好帮手慕星星 2018-05-08 16:14:56

经测试显示如下：

1、图片没有全屏显示，不知道你测试的时候是否是正常的，显示器的分辨率不同显示效果也会不同，建议设置图片宽度为100%。

2、图片之间存在缝隙是因为图片本身是内联块状元素（inline-block），默认之间存在缝隙，可以添加font-size:0;或者是设置图片为块状元素（block）。参考代码：

或者是

自己测试下，祝学习愉快~~

收起回答

Grant_Fang56 #1

老师你好！我也遇到了以上同样的问题 - 在.pic中已经设置了width:100%,可是缩放网页图片右边的空白还是存在；而设置font-size:0;就可以消除空白。1.请问对图片设置font-size的原理是什么？2.图片设置display:block后图片间的缝隙为何依然还存在呢？

2018-05-16 09:47:47
好帮手慕星星回复 Grant_Fang56 #2

你要设置图片的宽度为100%，图片设置为block哦，外层盒子不要设置固定的宽，这样在浏览器缩小的过程中是没有的问题。因为图片本身是内联块状元素（inline-block），默认之间存在缝隙，设置父元素盒子font-size:0;就可以去除了。

2018-05-16 11:38:44