关于font-size:0导致的vertical-align有差异产生的疑惑

Question

在设计inline元素的时候会有个小小的空白，为了代码易读，不缩进html代码选择了font-size：0,但是正常不加font-size：0，设置vertical-align：text-top结果是这样的，和我预想一样：

加了font-size：0,结果是这样的

不知道什么原因，希望能得到大神指点，万分感谢

---

补充下，font-size在父类里设置为了0，但在.text设置为了12px,希望能够在浏览器试试，谢谢

APPENDIX:
#css
.support{
    width: 80%;
    margin: 0 auto;
    font-size:0;          //消除内联元素间隙
    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>

Answer 1

你span给了行高,有没给它inline-block,所以你在控制台看的时候,之后灰色那么大,实际上他占据的大小是红色那么大.
text-top表现为元素和父级的content-area 对其

加一个x看一下就知道了,本来是x和右元素基线对其,所以图标和x的content-area上边对其,就表现为差不多中间的位置.
你把font-size设为0,x基线对其就是和text文字下边缘对其,那图标和content-area对其不就是和text文字下边缘对其么.

Answer 2

谢邀谢邀....本来想怒答一波，但是怕误人子弟....还是给你看张鑫旭大神的吧...

戳这里，关于text-top的理解