7

我很难理解 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/

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

4

2 回答 2

4 
display: inline-block

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

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

行高：48px；

于 2012-09-19T16:30:39.957 回答
0

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

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

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

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

于 2012-09-19T16:18:17.503 回答