Question

我有一个已知高度的div，以px为单位。在这个div中，我有一些带有已知字体大小的文本，用px表示。现在我想使用padding-top将文本向下推，使其接触到它下方的元素。但是，它不能通过推得太远来扩展div。

如何计算填充？只是从div-height中减去font-size会导致div扩展，即使我设置line-height：100％。是否有基于字体的定义高度 - 是否始终相同？或者它取决于font-family。我想它至少必须依赖于font-weight。

（不想使用position：absolute来解决下推问题。）

Answer 1

根据字体系列的不同而不同。每种字体都有不同的基线。如果将容器的高度设置为与字体的高度匹配，则字体仍将悬挂在容器下方。这可以使用行高居中，但字体上方和下方仍然会有一些空格。

这篇文章更好地解释了这一点。

http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/

<强>样本：

这里也是我开始的演示。您可以轻松地分辨基线的位置以及顶部有多少额外空间。当line-height设置为等于font-size时，它会垂直居中。但是，正如您所看到的，顶部和底部仍有一些空白区域。因此字体本身与容器的高度不完全相同。

<强> HTML

<h1>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
<h1>abcdefghijklmnopqrstuvwxyz</h1>

<h2>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>
<h2>abcdefghijklmnopqrstuvwxyz</h2>

<h3>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
<h3>abcdefghijklmnopqrstuvwxyz</h3>

<h4>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h4>
<h4>abcdefghijklmnopqrstuvwxyz</h4>

<强> CSS

h1 { 
    font-family:sans-serif;
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    border:1px solid #CCC;
}

h2 { 
    font-family:serif;
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    color:blue;
    border:1px solid #CCC;
    line-height:34px; /*NOTE THIS ONE HAS LINE-HEIGHT*/
}

h3 { 
    font-family:"impact";
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    border:1px solid #CCC;
}

h4 {
    font-family:"Courier New";
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    border:1px solid #CCC;
}

FIDDLE网址：

http://jsfiddle.net/KtY4F/9/

html，css。给定字体大小占用多少垂直像素？

1 个答案: