不同标签设置font-size，导致标签高度变化，不晓得原因，求指教。

Question

学习前端知识，遇到一个问题，在不同的标签设置font-size，导致li标签高度不一样(浏览器是chrome)：
问题部分HTML代码如下：

    <div class="top">
        <div class="top-con content clearfix">
            <div class="top-conleft lf">
                <ul class="top-list lf">
                    <li class=""><a href="javascript:;">首页</a></li>
                    <li class=""><a href="javascript:;">公司</a></li>
                    <li class=""><a href="javascript:;">校园</a></li>
                    <li class=""><a href="javascript:;">言职</a></li>
                    <li class=""><a href="javascript:;">课程</a></li>
                </ul>
            </div>
        </div>
    </div>

CSS代码如下(在.top-list li a选择器中设置font-size属性)：

.top-list {
    height: 40px;
}
.top-list li {
    float: left;
    width: 70px;
    text-align: center;
}
.top-list li:first-child {
    background-color: #000;
}
.top-list li a {
    font-size: 14px;
    color: #afb5c0;
}

页面效果如下图：

这里第一个li标签的高度变为41px了。

修改后的css代码如下(在.top-list li选择器中设置font-size属性):

.top-list {
    height: 40px;
}
.top-list li {
    float: left;
    width: 70px;
    font-size: 14px;
    text-align: center;
}
.top-list li:first-child {
    background-color: #000;
}
.top-list li a {
    color: #afb5c0;
}

第一个li的高度又正常了(见下图)，这是为什么？

页面还有一些初始化css：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
}
div {
    display: block;
}

Answer 1

等待大神解答