如何将空跨高度设置为等于默认行高？

我有一套<span>元素（每个元素都嵌套到对应的<div>）。他们构建了一堆面板，如下图所示。

当 span 包含一些文本时，它具有正常的高度。但是当它为空时，它的高度是0px。但我需要它有一个正常的高度（使它看起来像图片中的那样）。

如何实现这种行为？ （我尝试插入一个空格，但也许有更好的解决方案）。

这是一个简单而强大的解决方案：

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

(更新 12/18/2015: 而不是使用\00a0不间断空格，使用\200b，这也是一个不间断的空格，但宽度为零。请参阅我的其他答案https://stackoverflow.com/a/29355130/516910 https://stackoverflow.com/a/29355130/516910)

该 CSS 选择器仅选择“空”的范围，并将一些内容注入到该空空间中，即不间断空格字符。因此，无论您设置什么字体大小和行高，周围的一切<span>会排成一行，就像里面有文字一样<span>，这可能就是您想要的。

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

结果如下：

我发现使用时存在两个问题min-height:

1. 当字体大小改变时它很容易受到攻击
2. 文本基线不在正确的位置

以下是出现问题时的反例：

1. 字体大小发生变化，现在您必须再次手动调整最小高度。您不能使用相同的类来支持网站中字体大小不同的不同部分。这里这个地方的字体大小是30，但是min-height仍然设置为20。所以空的跨度没有那么高。 :-(

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

2. 您的空跨度具有正确的最小高度高度，但它与跨度周围的文本没有正确对齐。基线下降不正确。看那行“嗯？”以下：

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

最后一个示例的代码：

<div class="group">
  Hello <span class="item">Text</span>
</div>
<div class="group">
  Huh? <span class="item"></span>
</div>
<div class="group">
  Yes! <span class="correct"></span>
</div>

css:

.group {
  background-color: #f1f1f1;
  padding: 5px;
  font-size: 20px;
  margin-bottom: 20px;
}

.item {
  background-color: #d2e3c5;
  border-radius: 6px;
  padding: 10px;
  margin-bottom:5px;
  display: inline-block;
  min-height: 20px;
}

.correct {
  background-color: #d2e3c5;
  border-radius: 6px;
  padding: 10px;
  margin-bottom:5px;
  display: inline-block;
}
.correct:empty:before {
  content: "\00a0";
}