font-size的使用tips

在父级元素里写font-size和本级元素写font-size父级的盒子模型padding值不一样。
例：
html
 <div class="footer">
        <ul>
            <li><a href="#">安全说明</a></li>
            <li><a href="#">网站声明</a></li>
            <li><a href="#">隐私保密条款</a></li>
            <li><a href="#">网站地图</a></li>
            <li><a href="#">友情链接</a></li>
            <li><a href="#">加入收藏夹</a></li>
            <li><a href="#">人才招聘</a></li>
            <li><a href="#">手机一网通</a></li>
        </ul>
    </div>
css1：
.footer ul{
    text-align:center;
    padding:5px 0;
}
.footer ul li{
    display:inline-block;
    padding: 0 10px;
    border-right: 1px solid #ccc;
}
.footer ul li:last-child{
    border:none;
}
.footer ul li a{
    font-size:12px;
    color:#ccc;
}

css2：

.footer ul{
    text-align:center;
    padding:5px 0;
}
.footer ul li{
    /*font-size:0px;*/
    display:inline-block;
    padding: 0 10px;
    border-right: 1px solid #ccc;
    font-size:12px;
}
.footer ul li:last-child{
    border:none;
}
.footer ul li a{
    color:#ccc;
}

会发现第一种设置比第二种设置上间距要大5px。

这种情况不仅发生在垂直方向上，还发生在水平方向上。见参考资料3。

使用font-size还能解决一些其他问题。使用font-size:0解决设置inline-block引起的空白间隙问题见参考资料2。

参考资料：

1.https://blog.csdn.net/jliqing/article/details/49908511?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs&dist_request_id=1331989.2764.16187567140970623&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs  给父元素添加font-size:0属性可以消除5px间距

2.https://www.cnblogs.com/nyw1983/p/11626975.html  使用font-size:0解决设置inline-block引起的空白间隙问题

3.https://www.cnblogs.com/wang715100018066/p/6031182.html  行内元素在水平和垂直排列的时候会有间距