css - 一行文本的 CSS 高度是多少？好像不是1em

Question

看看这个 fiddle :

function toggle(event) {
    var element = document.getElementById('changeme');
    element.innerText = element.innerText ? '' : 'some text';
}
button = document.getElementById('button');
button.onclick = toggle;

#changeme {
    min-height: 1em;
    outline: 1px solid red;
}

<input id=button type=button value='Toggle content'>
<p id=changeme>dynamically changing content
<p>This should not move (up and down)

我在那里有一个文本元素(它是 <p> ，但也可能是 <div> )，有时我将其设置为空。 (使用按钮在空内容和某些内容之间切换。)

这个带有一行文本的元素的高度是多少？我想要一个通用答案，这样我就可以设置它的 min-height为该值，以便元素在空时不会折叠。我以为1em是我正在寻找的，但是 1em似乎是“W”等字母的大小，而“g”等字母的基线下方没有空格。

我正在寻找一个巧妙的技巧，为可能为空的元素提供恒定的高度，而不用输入  进去。 (目前我使用 1.5em 。)

Answer 1

行高的精确计算很复杂(参见 CSS 2.1 第 10 节 Visual formatting model details )，但在像这样的简单情况下，高度由 line-height 值决定，当元素不为空。当它为空时，高度将为空，但 min-height 设置强制高度为字体大小 (1em)。

初始值line-height依赖于浏览器，并且预计也依赖于字体。实际上，默认值始终大于字体大小。这解释了这里发生的情况。

要保持高度恒定，最好显式设置其 line-height 并将 min-height 设置为相同的值，例如

#changeme {
    line-height: 1.25em;
    min-height: 1.25em;
}

注意:em 单位表示字体的大小，根据定义，即字体的高度。这是一个引用量，通常不对应于任何字母的高度(或宽度)；大多数字母的高度小于字体大小(尽管这因字母和字体而异)。