0

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

如何计算填充？只需从 div-height 中减去 font-size，就会导致 div 扩展，即使我设置了 line-height:100%。是否有基于字体定义的高度 - 它总是相同的吗？还是取决于字体系列。我想它至少必须取决于字体粗细。

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

4

1 回答 1

3

它因字体系列而异。每种字体都有不同的基线。如果您将容器的高度设置为与字体的高度匹配，那么字体仍将悬挂在容器下方。这可以使用 line-height 居中，但是在字体上方和下方仍然会有一些空间。

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

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;
}

小提琴网址：

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

于 2013-01-31T22:10:07.610 回答