在css中设置图片的样式：font-size：0；为什么会改动字到图片的距离

<a class="s_c_img" href="">
    <img src="jQuery实战-小米官网的开发_files/2(4).jpg" alt="" width="160px" height="160px">  
</a>
<a class="s_c_title" href="">小米体重秤</a>
<p class="s_c_detail">高精度压力传感器，手机管理全家健康</p>

#smart .s_content ul .s_c_bottom .s_c_img{
    font-size: 0;/* 这是设置了font-size：0;的*/
    text-align: center;
    display: block;
    padding: 20px 35px;
}
#smart .s_content ul .s_c_bottom .s_c_title{
    text-align: center;
    display: block;
    font-size: 14px;
    color: #000;
}
#smart .s_content ul .s_c_bottom .s_c_detail{
    font-size: 12px;
    text-align: center;
    color: #999;
    margin: 5px 0 13px 0;
}

#smart .s_content ul .s_c_bottom .s_c_img{
    /* font-size: 0; */这个是未设置font-size：0;的样式
    text-align: center;
    display: block;
    padding: 20px 35px;
}
#smart .s_content ul .s_c_bottom .s_c_title{
    text-align: center;
    display: block;
    font-size: 14px;
    color: #000;
}
#smart .s_content ul .s_c_bottom .s_c_detail{
    font-size: 12px;
    text-align: center;
    color: #999;
    margin: 5px 0 13px 0;
}

这两者有细微的差别，为什么会有这样的差别？希望大佬可以帮忙告诉下，谢谢！！！

因为bolck,inline-block中 自带一个空格缝隙，你把它设为font-size:0 ，就把缝隙消除了

该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

各关键字对应的字体必须比一个最小关键字相应字体要高，并且要小于下一个最大关键字对应的字体。

默认值：medium。是和0不一样的