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

我有一套<span>元素（每个元素嵌套到记者<div>）。他们构建了一堆面板，如下图所示。如何将空跨度高度设置为默认行高？

enter image description here

当跨度包含一些文本，它有一个正常身高。但是当它是空的，它的高度是0px。但我需要它有一个正常的高度（使其看起来像在图片中）。

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

来源

2013-01-08 Roman

怎么样'分钟，height'？我相信ie6会出现什么问题，但所有其他浏览器都应该可以正常工作。 – Morpheus

我应该使用哪个最小高度值？如何获得默认线条高度？ – Roman

行高通常是1.2em – Loris

下面是一个简单和健壮溶液：

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

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

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

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

结果看起来是这样的：

correct resulting layout

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

它是脆弱的，其中的字体大小改变
文本基线是不是在正确的位置

下面介绍一下反例的样子，当事情出错：

字体大小变化，现在你必须手工调整分钟 - 再次。您不能使用相同的课程来支持字体大小不同的网站的不同部分。这里的字体大小是30，但最小高度仍然设置为20.所以空白区域不是很高。 :-(

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

font-size is 30, but min-height is 20. oops.

你的空跨度具有最小高度正确的高度，但是它不与正确排列文本周围跨度基线下降错误看，说线下。“咦？”：

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

how baseline fails

代码对于最后的例子：

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

来源

2015-03-30 19:38:23

比接受的更好的解决方案！ –

在提问的评论中提到原始海报，或许他们会更新所选答案。 –

这是一个CSS规则的宝石！消除如此多的经典黑客从过去 –

您可以设置跨度显示：inline-block;然后添加最小高度

来源

2013-01-08 15:08:56 Loris

'min-height'可能是一个合适的快速和肮脏的解决方案。我看到'min-height'有两个可能的问题：字体大小和基线，我在下面提供了一个强大的解决方案。 –

也许这将工作 -

span{ 
    min-height:16px; 
}

来源

2013-01-08 15:09:17 svineet

请注意，内联元素不能有高度定义 – Loris

从图片中，似乎已经设置在span元素display: block。如果没有，请添加。或者，请考虑使用div。两个元素的区别在于span默认为内联，div默认为阻挡，所以为什么不使用后者呢？

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

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

来源

2013-01-08 18:25:36

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

回答

相关问题