html - 字体大小是否有不可见的填充/边距？

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 像素高，并且我希望文本/跨度在其中垂直居中。一切都是垂直的，但是当我将 font-size 设置为 48px 并带有 2px 红色边框时，边框被推到了 li 元素之外。似乎应用了不可见的填充/边距。

这是一个演示“问题”的 jsfiddle:http://jsfiddle.net/qtVK3/

当我检查 Chrome 中的 span 元素时，它显示 span 元素的实际高度为 57px。多出的 7px 从何而来？

Answer 1

display: inline-block

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

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

line-height: 48px;