消除多个a标签之间a标签前面的空隙

代码

 <div class="site-topbar">

     <!-- 宽有限，中间部分 -->
     <div class="container">

         <!-- 公司各类网址导航 -->
         <div class="topbar-nav">
             <a href="#">小米商城</a><span class="shugang">|</span>
             <a href="#">MIUI</a><span class="shugang">|</span>
             <a href="#">loT</a><span class="shugang">|</span>
             <a href="#">云服务</a><span class="shugang">|</span>
             <a href="#">天星数科</a><span class="shugang">|</span>
             <a href="#">有品</a><span class="shugang">|</span>
             <a href="#">小爱开放平台</a><span class="shugang">|</span>
             <a href="#">企业团购</a><span class="shugang">|</span>
             <a href="#">资质证照</a><span class="shugang">|</span>
             <a href="#">协议规则</a><span class="shugang">|</span>
             <a href="#">下载app</a><span class="shugang">|</span>
             <a href="#">Select Location</a>
         </div>
     </div>
 </div>
css

.site-topbar{
    display: flex;
    justify-content: center;
    height: 40px;
    background-color: rgb(51, 51, 51);
}
.container{
    width: 1226px;
    height: 40px;
    line-height: 40px;
    font-size: 0.75rem;
    color: rgb(176, 176, 176) ; 
}
.shugang{
    margin-left: 0.3em;
    margin-right: 0.3em;
}
.site-topbar a{
    font-size: 0.75rem;
    color: rgb(176, 176, 176) ; 

}

问题原因：a标签默认是行内元素，而行内元素之间的回车键、多个空格、多个制表符（tab）等均会按一个空格来处理，这样的话，如果相邻的两个a标签不在同一行（换句话说它们之间有回车换行符），则显示在页面的时候它们之间就会出现一个空格的间隙。
解决办法一：
要想解决这个问题，最好也是最简单的办法，就是把它们写在同一行且互相之间不留任何字符（包括空格），比如：

<a href="...">链接1</a><a href="...">链接2</a><a href="...">链接3</a>

办法二：
既要把它们写在不同的行，又不想有空隙，可以把a标签改为块级元素。但是要想让块级的a标签仍然排在同一行就要多费一番手脚了，比如通过浮动（浮动时a标签会自动变为块级元素）：
给a标签的父元素加上样式，让a标签有行内元素转为块级元素即可

.topbar-nav{
    display: flex;
    justify-content: flex-start;
}