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

Question

我很难理解 font-size 在以下 html sn-p 中的工作原理：

.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

您缺少 line-height（分隔多行文本的空间） - 这是添加到字体高度的。

您应该将包含元素的高度设置为所需的大小，而不是以像素为单位显式设置字体大小（不利于可访问性的格式）

编辑：我很厚。边距/边框被添加到内容框之外。您已将 line-height 设置为 50px，因此边框将在 50px 之外，因此出现在元素之外。

我关于以像素设置字体的评论仍然有效。

Answer 2

display: inline-block

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

您还需要将 line-height 更改为 48px。

行高：48px；