html - 具有空元素的 div 或 span 的最小高度

Question

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

我试过，将以下内容放入相关的 css 类中，但问题是我必须手动调整字符串高度(我不确定它是否为“1em”。可能不是)。执行此操作的正确方法是什么？

min-height : 1em;

Answer 1

如果你想设置它的高度，你的 span 元素需要成为一个 block 元素。因此，请根据需要设置样式 display: block 或 display: inline-block。

span.item {
  display: inline-block;
}

要设置空跨度的高度，我发现最好简单地注入(inject)   而不是设置最小高度。 (更新:根据@sawa，与其使用不间断的空格字符，不如使用不占用空格的更合适的字符，即 unicode 零宽度空格字符， \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)