块级标签使用 display:inline-block;显示一行，存在多余的边距的bug解决办法

Posted 2021-03-05 knowledge-is-infinite

解决办法：

在父元素中使用：font-size:0;即可以解决
实例：

<template>
    <div class="home-page">
        <ul class="navigator">
            <li>推荐</li>
            <li>课程</li>
            <li>实践</li>
            <li>职业路径</li>
            <li><img src="../assets/history.png" alt="历史"></li>
            <li><img src="../assets/search.png" alt="搜索"></li>
        </ul>
    </div>
</template>
<style>
    .navigator{
        background: #FFFFFF;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
        font-size: 0px;
    }
    .navigator li{
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #71777D;
        letter-spacing: 0;
        line-height: 18px;
        display: inline-block;
        margin-right: 20px;
    }
    .navigator li:nth-child(4){
        margin-right: 65px;
    }
    .navigator li>img{
        display: inline-block;
        width: 18px;
        height: 18px;
    }
</style>