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

【问题标题】：What is the CSS height of a line of text? It doesn’t seem to be 1em一行文本的 CSS 高度是多少？好像不是1em
【发布时间】：2014-10-10 16:29:17
【问题描述】：

看看这个小提琴：

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”这样的字母在基线下方的空格。

我正在寻找一个巧妙的技巧来给可能为空的元素一个恒定的高度，而不是将&nbsp; 放入其中。（目前我使用1.5em。）

【问题讨论】：

line-height 在大多数浏览器中的默认值为1.2 / 1.2em 或120%。
正如@HashemQolami 所说：jsfiddle.net/webtiki/4g9wnptp/19
相关问题：stackoverflow.com/questions/7849506/…stackoverflow.com/questions/16163788/…

标签： css em

【解决方案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 单位表示字体的大小，即字体的高度。这是一个参考量，通常不对应任何字母的高度（或宽度）；大多数字母的高度小于字体大小（尽管这因字母和字体而异）。

【讨论】：

看看我在 CSS 2.1 的第 10.6.1 节中还发现了什么：“注意：CSS 的第 3 级可能包含一个属性来选择用于内容高度的字体度量。” ...

【解决方案2】：

默认 line-height 是 normal（该属性的有效 CSS 值）。很遗憾，您无法将 min-height 设置为该值。

除了normal，line-height 可以有固定长度值（这里不感兴趣）或与font-size 相关的因素。有趣的是，normal 的数字等价物不仅取决于浏览器。对于不同的字体和字体大小，它通常在 1.0 和 1.5 之间（无单位）！

因此，将min-height 设置为介于 1em 和 1.5em 之间的漂亮值。然后将line-height 设置为相同的值，以确保它实际上是相同的。

请注意，对于line-height，带有 em-unit 或 unit less 的值的含义相同：前者是相对于当前字体大小的固定长度，而后者是相对于 ... 字体大小的因子.

【讨论】：