今天寫demo，用行內(nèi)元素的時(shí)候，發(fā)現(xiàn)了一個(gè)小問(wèn)題，行內(nèi)元素之間盡然會(huì)有一個(gè)小空隙，但是我沒(méi)有加左右的margin真的是神奇。突然明白為什么每次面試問(wèn)我行內(nèi)元素和塊級(jí)元素的區(qū)別時(shí)，面試官臉上的失望是從哪里來(lái)的。

上代碼：

    .main{
        margin: 100px;
    }
    span{
        background: blue;
        color: white;
    }    
    <div class="main">
        <span>第一個(gè)</span>
        <span>第一個(gè)</span>
        <span>第一個(gè)</span>
    </div>

這三個(gè)span之間的空格豈不是很玄妙。
換種寫法

    <div class="main">
        <span>第一個(gè)</span><span>第一個(gè)</span><span>第一個(gè)</span>
    </div>

間隙消失了，那么可以看出之所以產(chǎn)生間隙是因?yàn)樾袃?nèi)元素后面換了行所以產(chǎn)生了間隙。
那么解決辦法也有很多。

負(fù)邊距

行內(nèi)元素在水平方向上的 margin 是存在的，在垂直方向上不存在，所以加一個(gè)負(fù)的margin就可以了。

使用font-size = 0

神奇的屬性

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

當(dāng)然其他還有很多去除間隙的方法，我還是更喜歡 font-size 這一種