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

Question

当我将一个恰好是空字符串或仅包含空格的字符串包含在内span或div该字符串中时,该部分没有任何高度,当它span或div进一步嵌入到类似a的内容中时table,该单元格没有足够的高度,并且看起来像错误.如何确保a span或者div至少占用字符串有其他字符时的高度？这就像\strut在TeX中做的那样.我可以在字符串中插入一些东西,或者调整css.

我试过,将以下内容放入relavant css类,但问题是我必须手动调整字符串高度(我不确定它是否是"1em".可能不是).这样做的正确方法是什么？

最小高度:1em;

Answer 1

你的span元素都需要,如果你想设置它的高度,成为一个块级元素.所以设置风格display: block或display: inline-block适当.

span.item {
  display: inline-block;
}

要设置空跨度的高度,我发现最好只是注入 而不是设置最小高度.(更新:根据@sawa,而不是使用不间断的空格字符,也许更合适的字符不占用空间,即unicode ZERO WIDTH SPACE字符,\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)