在設(shè)計(jì)inline元素的時(shí)候會(huì)有個(gè)小小的空白，為了代碼易讀，不縮進(jìn)html代碼選擇了font-size：0,但是正常不加font-size：0，設(shè)置vertical-align：text-top結(jié)果是這樣的，和我預(yù)想一樣：

加了font-size：0,結(jié)果是這樣的

不知道什么原因，希望能得到大神指點(diǎn)，萬(wàn)分感謝

補(bǔ)充下，font-size在父類里設(shè)置為了0，但在.text設(shè)置為了12px,希望能夠在瀏覽器試試，謝謝

APPENDIX:
#css
.support{
    width: 80%;
    margin: 0 auto;
    font-size:0;          //消除內(nèi)聯(lián)元素間隙
    border: 1px solid #ccc;
}
.icon{                   //圖片font-size:0
    width:40px;
    height:40px;
    display:inline-block;
    vertical-align:text-top;
    margin-right:6px;
    background-size:40px 40px;
    background-repeat: no-repeat;
    background: url('xxx')
}
.text{
    font-size:12px;    //這里再次設(shè)置font-size:12px
    line-height: 40px;
}


#html
<div class="support">
    <span class="icon"></span>
    <span class="text">Text...</span>
</div>