css - 如何为空/空白内联 block 元素提供其容器行高的高度？

Question

行内 block 元素默认为其容器行高的高度 - 当它们有内容时。我发现空的和只有空白的内联 block 元素默认为高度:0(这是在 Firefox 上)。

有没有办法让空的内联 block 元素获得与包含文本的内联 block 元素相同的容器行高高度？

硬编码高度不是一种选择，添加随机 HTML 也不是   来使元素不“空”。我查找了重复项，但很惊讶没有找到任何重复项。

因此，例如，在此演示中，我希望第一个跨度(围绕一个常规空间)显示第二个跨度(围绕一个  )如何出现:

.inlineblock {
  display: inline-block;
  border: 2px solid #FF0000;
}

Lorem ipsum dolor sit amet, consectetur<span class="inlineblock"> </span>adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur<span class="inlineblock">&nbsp;</span>sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

...而不是它当前的样子，它是这样的，第一个跨度高度:0:

---

我试过:给它一个固定的宽度，height: auto;，height: inherit;，垂直对齐，然后给它是一个position:relative段落和/或行内 block 容器，然后 height: 100%;，但没有成功。

.inlineblock {
  display: inline-block;
  border: 2px solid #FF0000;
}
.width {
  width: 5px;
} 
.percent {
  height: 100%;
}
.relative {
  position: relative;
}
.vert {
  vertical-align: top;
}
.auto {
  height: auto;
}
.inherit {
  height: inherit;
}

<p class="relative">Lorem ipsum dolor sit amet, consectetur<span class="inlineblock"> </span>adipiscing elit, sed do<span class="inlineblock percent"> </span>eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation<span class="relative"><span class="inlineblock percent"> </span></span>ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in<span class="inlineblock vert"> </span>voluptate velit esse<span class="inlineblock inherit"> </span>cillum dolore<span class="inlineblock auto"> </span>eu fugiat<span class="inlineblock width"> </span>nulla pariatur. Excepteur<span class="inlineblock">&nbsp;</span>sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

Answer 1

正如@Douglas 所评论和演示的那样，如果您想避免内容，请使用 1em 的高度。 em 将相对于父级，因此将与父级的 font-size 很好地缩放。

根据此处的引用:http://www.w3.org/TR/css3-values/#font-relative-lengths

...the font-relative lengths refer to the font metrics of the element on which they are used. The exception is when they occur in the value of the ‘font-size’ property itself, in which case they refer to the computed font metrics of the parent element..

在您的情况下，跨度没有明确定义的 font-size 因此它们从父级继承。 1em 的高度现在将与其继承的字体大小相关。

你的问题的原因是空的 inline-blocks 被当作内联处理。没有填充，也没有内容可以为此设置 font-size 和 line-height。因此，它们只是在没有 width 和 height 的情况下崩溃。给它一个高度(1em)，给它一些padding(如果需要)，并给它一个vertical-align。

示例 fiddle :jsfiddle.net/abhitalks/wggpvb2g/2

示例片段:

p:first-of-type { font-size: 11px; }
.inlineblock {
  display: inline-block;
  border: 2px solid #f00;
  vertical-align: middle;
  padding: 2px; height: 1em;
}

<p>Lorem ipsum dolor sit amet, consectetur<span class="inlineblock"></span>adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur<span class="inlineblock">&nbsp;</span>sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur<span class="inlineblock"></span>adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur<span class="inlineblock">&nbsp;</span>sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>