2-7:在boxfour里面添加了display:block,这个是转化成块状元素,可以消除间隙吗?

2-7:在boxfour里面添加了display:block,这个是转化成块状元素,可以消除间隙吗?

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

   

    *{margin:0;

        padding:0;

        

    }

    .boxone{background:black;

        width:100%;

        height:100px;

        

        position:absolute;

        overflow:hidden;

        top:0;

    

    }

    .boxthree ul li{

        line-height:100px;

        list-style:none;

        float:left;

      

        margin-right:30px;

        color:white;

        font-weight:bold;

   

        

    }

   .boxthree{float:right;}

   .boxfour img{

                display:block;

                width:100%;}

    .boxfour{

        padding:100px 0;

    }

    

         

    

    .boxfive{

            width:100%;

             background:black;

             height:100px;

             line-height:100px;

             color:white;

             position:fixed;

             bottom:0;

    }

    .boxfive ul{

        width:100%;

        text-align:center;

        

    }

    .boxfive li{

        display:inline-block;

        line-height:100px;

        margin:0 15px;

    }

       

    </style>

</head>

<body>

    <div class="boxone">

  <div class="boxtwo">

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

  <div class="boxthree">

    <ul>

        <li>课程

        <li>职业路径</li>

        <li>实践</li>

        <li>猿问</li>

        <li>手记</li>

    </ul>

  </div>

  </div>             

     

<div class="boxfour">

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

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

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

</div>

<div  class="boxfive">

    <ul>

        <li>网站首页</li>

        <li>企业合作</li>

        <li>人才招聘</li>

        <li>联系我们</li>

        <li>常见问题</li>

        <li>友情链接</li>

   </ul>

      <span>课程</span>  


     <span>职业路径</span>  


     

</div>


</body>

</html>


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

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

2回答
好帮手慕慕子 2020-04-18 09:33:25

同学你好,因为img标签的display属性默认是inline,行内元素自带间距,所以图片之间存在间隙。

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

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

好帮手慕慕子 2020-04-17 15:19:54

同学你好,可以消除间隙的,如下,效果图中图片间是不存在间隙的。

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

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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