行内元素产生水平空隙的原因及解决方案

行内元素之间产生空隙是由于换行符、制表符（Tab）、空格等字符引起的

解决办法1：暴力解决

将所有行内标签排成一行 这样就删除了换行符、制表符（Tab）、空格等字符

解决办法2：利用Html 注释

<div class="span-wrap">
       <span>行内元素</span><!--
    --><span>行内元素</span><!--
    --><span>行内元素</span><!--
    --><span>行内元素</span><!--
    --><span>行内元素</span><!--
    --><span>行内元素</span>
</div>

这种方法增加了代码量 而且还丑

解决办法3：margin属性为负数

.span-wrap span{
        margin-left: -4px;
    }

这种方法你必须根据实际情况去计算

解决办法4：父级设置字体大小为0px

个人推荐第四种方法