span和a标签的父对象的font-size也设置为零了，怎么还有间隙复制代码做一个demo却没有间隙找了一下午都没有找到原因

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="zm.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3270532_4d148q020pc.css">
   
</head>
<body>
    <div class="home">
        <div class="mainnav">
            <div class="title_nav">
                <a href="https://www.znzmo.com/"></a>
            </div>
            <div class="container_nav">
                <a class="home_text" href="">首页</a>
                <a class="model_control" href="">3D模型</a>
                <div class="model"></div>
                <a href="">SU模型</a>
                <a href="">全球案例</a>
                <a href="">灵感图库</a>
                <a href="">材质贴图</a>
                <a href="">CAD图纸</a>
                <a href="">方案文本</a>
                <a href="">效果图</a>
            </div>
            <div class="personal_nav">
                <div class="upload_btn">
                    <img src="img/上传-2x.png" alt=""><span>上传赚钱</span> 
                </div>
                <div class="vip_btn">
                    <span class="icon-vip iconfont"></span><span class="vip">VIP</span>  
                </div>
                <a class="sign_btn" href="https://www.cool-de.com/thread-2254039-1-1.html">
                    <img src="img/签到-2x.png" alt=""><span >签到</span> 
                </a>
                <div class="login_btn">
                    <span>登录</span>
                    <span class="separator">|</span>
                    <span>注册有礼</span>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="container_background"></div>
            <div class="container_menu">
                <span class="model_3D">3D模型</span>
                <span class="model_SU">SU模型</span>
                <span class="case_world">全球案例</span>
                <span class="idea">灵感</span>
                <span class="picture">贴图</span>
                <span class="model_CAD">CAD</span>
                <span class="scheme">方案文本</span>
                <span class="software">软件</span>
                <!-- <div class="triangle"></div> -->
                <div class="input_btn">
                    <input  class="input_btn_left" type="text" placeholder="请输入关键词，搜索3D模型" >
                    <div class="fil">
                        <span  class="icon-xiangji iconfont" ></span>
                        <input type="file" style="opacity: 0;"> 
                    </div>
                    <a href="https://www.iconfont.cn/"><span class="icon-sousuo iconfont"></span></a>
                </div>
                <div class="input_btn_inside">
                    <div class="top">
                        <div class="del">
                            <span class="search_history">搜索历史</span>
                            <a href=""><strong>清空</strong></a>
                            <span class="icon-shanchu iconfont"></span>                           
                        </div>
                        <div class="text">
                            <span>碎石</span>
                            <span>铁艺</span>
                            <span>画</span>
                            <span>大理石</span>
                            <span>玻璃隔断</span>
                            <span>地毯</span>
                            <span>木纹</span>
                           
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="change">
                            <a href="" class="icon-dianzan iconfont"><strong></strong></a>
                            <span>为您推荐</span>
                            <span>换一换</span>
                            <a href="" class="icon-wodebaobeiye_genghuan iconfont"></a>
                        </div>
                        <div class="history"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script >
        
    </script>
    
</body>
</html>



*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
ol,ul{
    list-style: none;
}

.home .mainnav{
    position: relative;
    width: 1522px;
    height: 64px;
    background-color: #040000;
}
.home .mainnav>div{
    float: left;
    position: relative;
    top: 50%;
}
.home .mainnav .title_nav{
    width: 60px;
    height: 30px;
    margin-top: -15px;
    margin-left: 50px;
}
.home .mainnav .title_nav a{
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(img/zhimo_logo.png);
    background-size: 100% 100%;
}
.home .mainnav .container_nav{
    width: 903px;
    height: 28px;
    margin-top: -14px;
}
.home .mainnav .container_nav .model_control:hover +.model{
    transition-duration: 0.5s;
    display: block;
}
.home .mainnav .container_nav .model{
    display: none;
    position: absolute;
    z-index: 500;
    width: 1522px;
    height: 380px;
    margin-top: 17px;
    margin-left: -110px;
    background-image: url(img/model.png);
    background-size: 100% 100%;
}
.home .mainnav .container_nav .home_text:hover{
    transition-duration: 0.5s;
    font-size: 19px;

}
.home .mainnav .container_nav a{
    display: inline-block;
    margin-left: 26px;
    font-size: 16px;
    color: #ffffff;
    line-height: 28px;
}
.home .mainnav .personal_nav{
    width: 431px;
    height: 34px;
    margin-top: -17px;
}
.home .mainnav .personal_nav>div{
    float: left;
    margin-left: 32px;
}
.home .mainnav .personal_nav>a{
    float: left;
    margin-left: 32px;
}
.home .mainnav .personal_nav .upload_btn{
    width: 96px;
    height: 34px;
    margin-left: 0px;
    font-size: 16px;
    text-align: center;
}
.home .mainnav .personal_nav .upload_btn img{
    line-height: 34px;
    height: 12px;
    width: 16px;
    margin: 0px 4px 0px 0px;
}
.home .mainnav .personal_nav .upload_btn span{
    line-height: 34px;
    color: #ffffff;
}
.home .mainnav .personal_nav .vip_btn{
    width: 45px;
    height: 34px;
}
.home .mainnav .personal_nav .vip_btn span{
    margin-right: 4px;
    line-height: 34px;
    font-size: 15px;
    color: #ffffff;
}
.home .mainnav .personal_nav .vip_btn .vip{
    margin-right: 0px;
    font-size: 16px;
}
.home .mainnav .personal_nav .sign_btn{
    width: 52px;
    height: 34px;
}
.home .mainnav .personal_nav .sign_btn img{
    line-height: 34px;
    width: 16px;
    height: 14px;
    margin-right: 4px;
}
.home .mainnav .personal_nav .sign_btn span{
    line-height: 34px;
    color: #ffffff;
}
.home .mainnav .personal_nav .login_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 0px;
    width: 150px;
    height: 15px;
    margin-left: 0px;
}
.home .mainnav .personal_nav .login_btn span{
    line-height: 16px;
    font-size: 16px;
    color: #ffffff;
}
.home .mainnav .personal_nav .login_btn .separator{
    display: inline-block;
    margin: 0px 10px ;
}

.home .container{
    position: relative;
    height: 640px;
    width: 1522px;
    background-image: url(img/cHy76AMZAh.jpg);
    background-size: 100% 100%;
    overflow: hidden;
}
.home .container .container_background{
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #1b1b1b;
    opacity: 0.6;
}
.home .container .container_menu{
    position: absolute;
    display: inline-block;
    height: 32px;
    left: 300px;
    top: 300px;
    font-size: 0px;   
}
.home .container .container_menu span{
    display: inline-block;
    margin-right: 24px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}
.home .container .container_menu .model_3D{
    color: #ffffff;
}
.home .container .container_menu .input_btn {
    position: relative;
    height: 64px;
    width: 840px;
    margin-top: 15px;
    border-width: 0px;
    font-size: 16px;
    color: #e4e4e4;
    /* color: #b70505; */
}
.home .container .container_menu .input_btn .input_btn_left{
    float: left;
    width: 640px;
    border-radius: 10px 0px 0px 10px;
    border-width: 0px;
    padding-left: 30px;
    line-height: 64px;
    font-size: 20px;
}
.home .container .container_menu .input_btn a{
    box-sizing: border-box;
    float: left;
    width: 170px;
    height: 100%;
    background-color: #cb0018;
    border-radius: 0px 10px 10px 0px;
    text-align: center;
}
.home .container .container_menu .input_btn .fil{
    top: 50%;
    margin-top: -17.5px;
    margin-left: -50px;
    position: absolute;
    display: inline-block;
    width: 35px;
    height: 35px;
}
.home .container .container_menu .input_btn .fil input{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.home .container .container_menu .input_btn .fil span{
    position: absolute;
    display: inline-block;
    font-size: 35px;
    width: 100%;
    height: 100%;
    color: #c3c3c3;
}
.home .container .container_menu .input_btn>a>span{
    margin-left: 12.5px;
    font-size: 30px;
    line-height: 64px;
}
.home .container .container_menu .input_btn_inside{
    display: none;
    width: 100%;
    height: 180px;
    background-color: #ffffff;
    border-radius: 0px 0px 10px 10px;
}
.home .container .container_menu .input_btn:hover{
    background-color: #ffffff;
    border-radius: 10px 10px 0px 0px;
}
.home .container .container_menu .input_btn:hover +.input_btn_inside{
    display: block;
    box-sizing: border-box;
    border: 0.2px  solid rgb(193, 193, 193);
    border-width: 0.2px 0px 0px 0px;
}
.home .container .container_menu .input_btn:hover a{
    border-radius: 0px 10px 0px 0px;
    border: 0.2px  solid rgb(193, 193, 193);
    border-width:  0px 0px 0.2px 0px ;
}
.home .container .container_menu .input_btn_inside .top{
    height: 50%;
    width: 100%;
}
.home .container .container_menu .input_btn_inside .top .del {
    box-sizing: border-box;
    padding-top: 25px;
    padding-left: 20px;
    padding-right: 20px;
    height: 50%;
    width: 100%;
    background-color: rgb(255, 255, 255);
    font-size: 0px;
}
.home .container .container_menu .input_btn_inside .top .del span{
    margin: 0px 2px 0px 0px ;
    padding: 0;
    float:right;
    font-size: 16px;
    color: rgb(170, 170, 170);
    font-family: "Microsoft YaHei";
}
.home .container .container_menu .input_btn_inside .top .del .search_history{
    float:left;
    font-size: 12px;
    color: rgb(170, 170, 170);
    font-family: "Microsoft YaHei";
}
.home .container .container_menu .input_btn_inside .top .del a{
    float:right;
    font-size: 12px;
    color: rgb(170, 170, 170);
    font-family: "Microsoft YaHei";
}
.home .container .container_menu .input_btn_inside .top .text {
    box-sizing: border-box;
    height: 50%;
    width: 100%;
}
.home .container .container_menu .input_btn_inside .top .text span{
    float: left;
    padding: 0px;
    margin: 0px;
    /* margin-top: 3px; */
    margin-right: 15px;
    font-size: 12px;
    color: #878787;
}
.home .container .container_menu .input_btn_inside .top .text :first-child{
    margin-left: 20px;
}
.home .container .container_menu .input_btn_inside .bottom{
    height: 50%;
    width: 100%;
    border-radius: 0px 0px 10px 10px ;
}
.home .container .container_menu .input_btn_inside .bottom .change{
    font-size: 0px;
    padding: 0px;
    margin: 0px;
}
.home .container .container_menu .input_btn_inside .bottom .change span{ 
    float: left;
    font-size: 12px;
    color: #040000;
    background-color: blue;
}
.home .container .container_menu .input_btn_inside .bottom .change a{
    float: left;
    background-color: brown;
}

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
Heerey525 前端领域新星创作者 2022-05-02 21:47
关注
margin-right: 24px;

.home .container .container_menu span { display: inline-block; margin-right: 24px; font-size: 20px; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决 1
无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

报告相同问题？

关注问题

span和a标签的父对象的font-size也设置为零了，怎么还有间隙复制代码做一个demo却没有间隙找了一下午都没有找到原因 css3 html
2022-05-02 21:36

回答 1 已采纳 margin-right: 24px; .home .container .container_menu span { display: inline-block;
怎样将a 标签和span 同为兄弟元素，span 中的 / 下划线怎么居中设置样式？ css3 html5 javascript 有问必答
2021-03-28 20:03

回答 5 已采纳 a标签写的时候会把你的换行解析为空格，你写的时候a标签不要和span标签放一行，这样默认左右就是一样的间隔。
CSS 怎么让 el- input 和 span两个元素一行显示，和 v-if 判断 tr 最后一行 css elementui vue.js
2022-01-10 22:21

回答 1 已采纳给 td 加white-space: nowrap;不换行 v-if这里要隐藏吗？可以用css table tr:last-child { display: none; }
css如何让块无间隙,CSS 去掉inline-block间隙的几种方法
2021-08-04 08:45

陈犀的博客最近做移动端页面时，经常会用到inline-block元素来布局，但无可避免都会遇到一个问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及去掉间隙的方法，...
在用xpath定位网页数据的时候怎么通过定位a标签来判断标签下的span标签数据是一个还是两个？ html python 有问必答爬虫
2022-03-31 22:08

回答 3 已采纳尝试从上层节点进行选取，用text获取全部文本，然后选取拼接。 s = '''<span class="a-price" data-a-size="l" data-a-color="price"
a标签中嵌套span标签 css html5
2022-07-30 22:14

回答 1 已采纳因为 span{ color:black; } 比外面a的css优先级高可以设置为 a:hover{ color:green; } a:hover span{ color:green; }
想通过点击unmber_code_none将两个span的内容分别填入font_code_number和font-number_code中 html javascript
2022-10-15 16:11

回答 1 已采纳 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt
css span字体间距,如何清除a标签或者span标签之间的默认留白间距
2021-08-03 20:47

猪猪堂客的博客 } 这样的代码重置了浏览器默认样式类似标签这种inline-block元素，它们之间还是存在着留白和间距。index*{margin:0;padding:0;box-sizing:border-box;}html,body{width:100%;height:100%;}a{text-decoration:none;}....
通过a标签href值找到对应的span标签内容 javascript 有问必答
2022-07-04 00:21

回答 2 已采纳你题目的解答代码如下： <html lang="zh-cn"> <meta charset="utf-8" /> <head> <title>测试标题&
如何同时提取多个同种div下的第某个span标签(语言-python) css3 html python 有问必答
2021-12-26 11:47

回答 2 已采纳先获取所有class='hd'的div保存到列表中，然后遍历列表中每一项获取这一项div的第二个span targets2 = soup.find_all("div", class_="hd") fo
querySelectorAll()和getElementsByClassName()得到的同一个对象，为什么style属性的时候，一个代码有高亮显示（代码提示）一个没有 css html javascript
2022-06-05 18:22

回答 3 已采纳这个应该是编辑器的问题，只要代码能执行
html中div取消间隙,详解CSS 去掉inline-block元素间隙的几种方法
2021-06-14 02:19

陈熙昊的博客最近做移动端页面时，经常会用到inline-block元素来布局，但无可避免都会遇到一个问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及去掉间隙的方法，...
开发一个谷歌扩展，怎么获取当前页面代码中ul标签下li标签下a标签下span标签的值，span标签有俩个并且值不固定 javascript
2021-10-13 11:00

回答 1 已采纳 jq$("ul>li>a>span")
CSS3之解决相邻inline-block元素之间空白间隙问题
2019-12-09 15:50

Programmer.杨的博客一、遇到的问题前些天写瀑布流布局的时候，发现明明计算好了宽度使得一行能放下三张图片，实际效果却总是放不下，图片会挤到下一行去。上图：可以看到，我本来是想要...
HTML去除块元素间隙,如何删除内联或内联块元素之间的间隙
2021-07-01 01:38

轮王寺宫的博客删除内联或内联块元素间间隙的方法有：去掉元素标签间的空格、使用负边距、在父元素上设置字体大小为零、省略结束标签。在页面布局时，我们经常会使用到inline元素、inline-block元素，但无可避免都会遇到一个问题，...
inline-block间隙问题总结, ,style一个样式后面多加了一个分号; 导致样式失效
2019-10-06 08:45

dibengshao7358的博客　解决一:　只要把标签写成一行或者标签直接没有空格，就不会出现间隙。　但是这种方式是不太可靠，存在太多不可控的因素导致失效，　例如：代码生成工具、代码格式化、或者其他人修改了代码等等。下面列举了各种...
多个span中间会有间隙
2019-09-17 03:40

chengongbi5057的博客工作中，同事突然问这个问题，找了好久没找到为什么，结果百度了下，找到了简单的解决办法，就是span后面不要有空格或者换行。下面是简单写了个demo。 <!DOCTYPE html> <html> <head> <...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 5月11日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 5月3日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 5月2日

悬赏问题

¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
¥15 CSAPPattacklab
¥15 一直显示正在等待HID—ISP
¥15 Python turtle 画图
¥15 关于大棚监测的pcb板设计
¥15 stm32开发clion时遇到的编译问题
¥15 lna设计源简并电感型共源放大器
¥15 如何用Labview在myRIO上做LCD显示？(语言-开发语言)
¥15 Vue3地图和异步函数使用
¥15 C++ yoloV5改写遇到的问题

span和a标签的父对象的font-size也设置为零了，怎么还有间隙 复制代码做一个demo却没有间隙 找了一下午都没有找到原因

1条回答 默认 最新

问题事件

悬赏问题

span和a标签的父对象的font-size也设置为零了，怎么还有间隙复制代码做一个demo却没有间隙找了一下午都没有找到原因

1条回答默认最新