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

Question

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

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

  

min-height：1em;

Answer 1

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

span.item {
  display: inline-block;
}

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

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

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

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;