图片直接有空隙

图片直接有空隙

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

*{

padding: 0px;

margin:0px;

}

a{

text-decoration: none;

color: white;

}

.container{

width: 100%;

height: 100px;

background:black;

    position: fixed;

    top: 0;


}



.logo{

height: 100px;

float: left;

}

.nav ul{

margin-right: 150px;

float: right;

}


     .nav li{

  

    margin-top: 25px;

  list-style-type: none;

    float: left;

    color: white;

    margin-right: 50px;

    font-size: 30px; 

    }

    li a:hover {

    color:gray;

    } 

    .footer{

        position: fixed;

        bottom: 0px;


    width: 100%;

height: 100px;

background:black;

    


    }

    .footer ul{

    margin-left:300px;


    }


    .footer li{

    margin-top: 25px;

  list-style-type: none;

    float: left;

    color: white;

    margin-right: 50px;

    font-size: 30px;

    }

    .sss{

    height: 100px;

    width: 100%;

    }

    .banner{

    width: 100%;

    height: auto;

    }

    img{

    width: 100%;

    }

    .banner1,.banner2,.banner3{

    padding:0px;


    }

</style>




</head>

<body>


<div class="container">

<div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></a></div>

<div class="nav">

<ul>

<li><a href="#">课程</a></li>

<li><a href="#">职业路径</a></li>

<li><a href="#">实战</a></li>

<li><a href="#">猿问</a></li>

<li><a href="#">手记</a></li>

</ul>

</div>

</div>

<div class="sss"></div>

<div class="banner"> 

<div class="banner1">

<img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"></div>

<div class="banner2"><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"></div>

<div class="banner3">

<img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">

</div>

</div>

<div class="sss"></div>

<div class="footer">

<ul>

<li><a href="#">网站首页</a></li>

<li><a href="#">企业合作</a></li>

<li><a href="#">人才招聘</a></li>

<li><a href="#">联系我们</a></li>

<li><a href="#">罕见问题</a></li>

<li><a href="#">友情链接</a></li>


</ul>

</div>

</body>

</html>

为什么图片中间会有空隙 用margin也去不掉

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕码 2019-04-17 15:18:57

同学你好!

图片中间有空隙的原因:

img标签是内联标签 内联标签和内联块标签本身就存在间隙,所以可以给图片设置为块级标签即可:

http://img1.sycdn.imooc.com//climg/5cb6d3560001a97004420178.jpg

如果帮助到了你 欢迎采纳 祝学习愉快~


也许是刘哆哆 2019-04-17 15:10:57

同学我使用了margin-bottom:-4px;来消除缝隙,可以实现效果

  • 同学你好!这个方法虽说也可以消除缝隙,但不是一个比较合适的方法,具体讲解可以参看我上面的回复~
    2019-04-17 15:20:18
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师