字体大小是否有隐形填充/边距？

Question

我很难理解font-size在以下html代码段中是如何工作的:

.container {
    padding: 20px;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul li {
    margin: 0;
    padding: 0;
    background: blue;
    height: 50px;
    line-height: 50px;
    color: white;
}

ul li span {
    border: 1px solid red;
    margin: 0;
    padding: 0;
}

#test1 li {
    font-size: 48px;
}

#test2 li {
    font-size: 42px;
}?

<div class="container">
    <ul id="test1">
        <li><span>Test</span></li>        
    </ul>
</div>

<div class="container">
    <ul id="test2">
        <li><span>Test</span></li>
    </ul>
</div>?

我希望我的li元素正好是50像素高,我希望文本/跨度在其中垂直居中.一切都是垂直的,但是当我使用2px红色边框将font-size设置为48px时,边框会被推到li元素之外.几乎看起来应用了隐形填充/边距.

这是一个展示"问题"的jsfiddle:http://jsfiddle.net/qtVK3/

当我span在Chrome中检查元素时,它显示span元素的实际高度为57px.额外的7px来自哪里？

Answer 1

display: inline-block

在跨度中需要，因为它是内联元素。默认情况下，您不能仅向内联元素添加顶部或底部填充的左侧和右侧。因此，即使将 padding 设置为 0，跨度也会被填充。

您还需要将行高更改为 48px。

行高：48px；