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

Question

<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;
}

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

Answer 1

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