如何将空的span元素高度设置为默认行高？

Question

我有一组元素（每个都嵌套在相应的

中）。它们构建了一个面板堆栈，就像下面的图片一样。

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

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

- Roman

---

min-height 怎么样？我相信在ie6中会有问题，但其他所有浏览器都应该可以正常工作。 - Morpheus

行高通常为1.2em。 - Loris

把一个空的div元素的内容设置为   ，是不就能实现这个效果了吗？ - Izhaki

我刚刚提供了一个解决方案，使用:empty和:before选择器来插入一个空格。所以你至少需要IE9来支持它。这个解决方案还修复了文本基线的问题，如果你的span周围有相邻的文本。 - broc.seib

Roman，请看@broc.seib的回答，当我在谷歌上尝试解决同样的问题时，这个问题是我的热门搜索结果，他的答案更加通用，是其他人更好的“默认”解决方案！ - Ward D.S.

Answer 1

这里提供一种简单而且健壮的解决方案：

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

(更新于2015年12月18日：不要再使用 \00a0 不间断空格，而是使用 \200b，它也是一个不间断空格，但宽度为零。请看我的另一个答案：https://dev59.com/iGoy5IYBdhLWcg3wN7i8#29355130)

这个CSS选择器只选择那些“空”的 <span> 元素，并向其中注入一些内容，即一个不间断空格字符。因此，无论你设置了什么字体大小和行高，这个 <span> 周围的所有内容都会排列整齐，就像你在其中插入了文本一样，这可能正是你想要的。

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

结果看起来像这样：

---

我认为使用 min-height 有两个问题：

1. 当字体大小改变时，它会很脆弱
2. 文本基线不在正确的位置上

当事情出了问题时，反例看起来像这样：

1. 字体大小改变了，现在你必须再次手动调整 min-height。你不能使用相同的类来支持网站的不同部分，其中字体大小是不同的。在这个例子中，此处的字体大小为 30，但 min-height 仍设置为 20。因此，空的 <span> 没有那么高。 :-(

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

2. 使用 min-height，你的空的 <span> 元素具有正确的高度，但其与周围文本的对齐不正确。基线位置错误。请看下面这行写着“Huh？”的文本：

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

- broc.seib

---

在问题的评论中提到这一点，或许原帖的发布者会更新所选答案。 - broc.seib

这是一条非常棒的CSS规则！它消除了许多过去经典的  hack。 - Aaron Hudon

好的回答！链接到维基百科（https://en.wikipedia.org/wiki/Zero-width_space）。 - vee

Answer 2

你可以将span设置为display:inline-block;，然后添加min-height属性。

- Loris

---

min-height 可能是一个适合快速解决问题的方法。我看到 min-height 存在两个可能的问题：字体大小和基线，对此我在下面提供了一个强大的解决方案。 - broc.seib

Answer 3

从图片来看，您似乎已经在元素上设置了display:block。如果没有，请添加此项。或者考虑使用div替代。两个元素的区别在于，默认情况下是内联的，而div则默认为块级元素，因此为什么不使用后者呢？

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

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

- Jukka K. Korpela

Answer 4

也许这个会起作用 -

span{
  min-height:16px;
}

- svineet

---

请注意，内联元素不能定义高度。 - Loris