關于font-size:0導致的vertical-align有差異產(chǎn)生的疑惑

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

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

不知道什么原因，希望能得到大神指點，萬分感謝

補充下，font-size在父類里設置為了0，但在.text設置為了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;    //這里再次設置font-size:12px
    line-height: 40px;
}


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