老师,两个块之间为什么会有4.73px的空白,怎么消除?

老师,两个块之间为什么会有4.73px的空白,怎么消除?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图作业</title>
    <style type="text/css">
        *{margin:0;
  padding:0;
  text-decoration:none;}
 body{font-family:"微软雅黑";}
.main{
    width:1200px;
    height:500px;
    margin:20px auto;
    background:green;
}
.main .tab{
    width:1200px;
    height:500px;
}
.main .tab .option{
    display:inline-block;
    width:300px;
    height:50px;
    line-height:50px;
    text-align:center;
    font-size:22px;
    color:#000;
    font-weight:bold;
}
    </style>
</head>
<body>
    <div class="main">
        <!-- 选项卡区 -->
        <div class="tab">
            <span class="option">首页</span>
            <span class="option">点击看看</span>
            <span class="option">会自动的</span>
            <span class="option">我的网站</span>
        </div>
        <!-- 轮播图区 -->
        <div class="banner">
            <a href="#"><div class="banner-img img1"></div></a>
            <a href="#"><div class="banner-img img2"></div></a>
            <a href="#"><div class="banner-img img3"></div></a>
            <a href="#"><div class="banner-img img4"></div></a>
        </div>
    </div>
</body>
</html>


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

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

2回答
好帮手慕糖 2019-03-22 13:39:13

同学你好,还可以把父级的font-size设置为0哦,例:

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

希望能帮助到你,欢迎采纳。

祝学习愉快!

好帮手慕糖 2019-03-22 11:12:21

同学你好,这里因为行内块元素之间有间距哦,建议:这里可以设置为块级元素,然后设置浮动在一行显示,例:

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

希望能帮助到你,欢迎采纳。

祝学习愉快!

  • 提问者 前端大白白 #1
    不改变为块元素,有什么办法可以消除这个间距吗?
    2019-03-22 11:35:22
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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