html - 如何设置空跨度高度等于默认行高？

Question

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

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

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

Answer 1

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

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

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

此 CSS 选择器仅选择“空”的跨度，并将一些内容注入该空白空间，即不间断空格字符。因此，无论您设置什么字体大小和行高，周围的所有内容<span>都会对齐，就像您在 that 中存在文本一样<span>，这可能是您想要的。

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

结果如下所示：

---

我看到使用的两个问题min-height：

1. 在字体大小发生变化的地方很容易受到攻击
2. 文本基线不在正确的位置

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

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

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

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

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";
}

Answer 2

您可以设置 span display:inline-block; 然后添加最小高度

Answer 3

从图片中，您似乎已经设置display: block了span元素。如果没有，请添加。或者，考虑div改用。这两个元素的区别在于span默认是inline，默认div是block，那么为什么不使用后者呢？

然后，您需要设置min-height一个等于具有内容的项目的高度的值。这通常由它们的行高决定。默认行高因字体（和浏览器）而异，因此要获得一致的结果，请明确设置行高，例如

* { line-height: 1.25; }
span { min-height: 1.25em; }

Answer 4

也许这会奏效-

span{
  min-height:16px;
}