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/

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

Answer 1

display: inline-block

跨度中需要它，因为它是内联元素。默认情况下，您无法仅向左右添加内部元素的顶部或底部填充。因此，即使将填充设置为0，也会填充范围。

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

行高：48px;

Answer 2

你错过了行高（用于分隔多行文本的空间） - 这是添加到字体的高度。

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

编辑：我很厚。边距/边框添加到内容框之外。您已将行高设置为50px，因此边框将是50px的补充，因此出现在元素外部。

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

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

2 个答案: