div或span的最小高度为空元素

Question

当我在span或div中包含恰好是空字符串或仅包含空格的字符串时，该部分没有任何高度，当span或div进一步嵌入像table之类的东西时，该单元格没有足够的高度，看起来不对。如何确保span或div至少占用字符串有其他字符时的高度？这就像在TeX中做\strut。我可以在字符串中插入一些东西，或者调整css。

我试过，将以下内容放入relavant css类，但问题是我必须手动调整字符串高度（我不确定它是否为“1em”。可能不是）。这样做的正确方法是什么？

最小高度：1em;

Answer 1

如果要设置其高度，则span元素需要成为块元素。因此，请根据需要设置样式display: block或display: inline-block。

span.item {
  display: inline-block;
}

要设置空跨度的高度，我发现最好只是注入 而不是设置最小高度。 （更新：根据@sawa，而不是使用不间断的空格字符，也许更合适的字符不会占用空间，即unicode ZERO WIDTH SPACE字符，\200b。）

span.item:empty:before {
  content: "\200b"; /* unicode zero width space character */
}

这适用于任何字体大小，并且它避免了基线没有与相邻文本对齐的问题。看看那句“嗯？”下面：

http://plnkr.co/edit/GGd7mz?p=preview

（参见类似问题：https://stackoverflow.com/a/29354766/516910）

Answer 2

您的代码不正确：您不需要在CSS中围绕值括起引号（“”）。

使用：

min-height: 1em; /* I am not sure if one can use em with height properties */

或使用：

min-height: 12px;