解决行内元素之间的间隙

今天写demo，用行内元素的时候，发现了一个小问题，行内元素之间尽然会有一个小空隙，但是我没有加左右的margin真的是神奇。突然明白为什么每次面试问我行内元素和块级元素的区别时，面试官脸上的失望是从哪里来的。

上代码：

    .main{
        margin: 100px;
    }
    span{
        background: blue;
        color: white;
    }    
    <div class="main">
        <span>第一个</span>
        <span>第一个</span>
        <span>第一个</span>
    </div>

这三个span之间的空格岂不是很玄妙。
换种写法

    <div class="main">
        <span>第一个</span><span>第一个</span><span>第一个</span>
    </div>

间隙消失了，那么可以看出之所以产生间隙是因为行内元素后面换了行所以产生了间隙。
那么解决办法也有很多。

负边距

行内元素在水平方向上的 margin 是存在的，在垂直方向上不存在，所以加一个负的margin就可以了。

使用font-size = 0

神奇的属性

    .main{
        margin: 100px;
        font-size: 0;
    }
    span{
        background: blue;
        color: white;
        font-size: 16px;
    }
    <div class="main">
        <span>第一个</span>
        <span>第一个</span>
        <span>第一个</span>
    </div>

当然其他还有很多去除间隙的方法，我还是更喜欢 font-size 这一种