Question

内联块元素默认为其容器的行高 - 当它们有内容时。我发现空的和仅空白的内联块元素默认为高度：0（这是在Firefox上）。

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

硬编码高度不是一个选项，也不是添加像 这样的随机HTML来使元素不是＆＃34;为空＆＃34;。我已经找了重复，很惊讶没有发现任何重复。

例如，在此演示中，我希望第一个跨度（在常规空间周围）显示第二个跨度（ 周围）的显示方式：

＆＃13;

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

＆＃13;

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

＆＃13;

...而不是它当前的出现方式，就像这样，第一个跨度高度：0：

我尝试过：给它一个固定的宽度，height: auto;，height: inherit;，垂直对齐，并给它一个位置：相对段落和/或内联-block容器然后height: 100%;，但没有成功。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

正如@Douglas评论和演示的那样，如果你想避免内容，那么使用1em的高度。 @IBOutlet weak var Cell_label: UILabel! required init(coder aDecoder: NSCoder) { super.init(coder: aDecoder) }将与父母相关，因此可以与父母em一起很好地扩展。

根据参考文献：http://www.w3.org/TR/css3-values/#font-relative-lengths

...字体相对长度是指元素的字体度量它们被使用了。例外情况是它们出现在值中 'font-size'属性本身，在这种情况下，它们引用计算父元素的字体指标..

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

您遇到问题的原因是空font-size被视为内联。没有填充，也没有内容可以设置inline-block和font-size。因此，在没有line-height和width的情况下，它们就会崩溃。给它一个height（1em），给它一些height（如果需要），并给它一个padding。

示例小提琴：jsfiddle.net/abhitalks/wggpvb2g/2

示例代码段 ：

＆＃13;

vertical-align

＆＃13;

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

＆＃13;

Answer 2

以下内容使其成为可能，并且不依赖于line-height，font-size或任何其他正在设置的css属性，但它是一个相当hacky的解决方案。

.inlineblock {
  display: inline-block;
}    
.inlineblock::after {
  display: inline-block;
  content: "\007C\00a0\00a0";
  border: 2px solid #FF0000;
}

Lorem ipsum dolor sit amet, consecteturadipiscing 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"> </span>sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

请注意，\007C\00a0\00a0代表nbsp;，css可以理解它。

此解决方案创建了一个新的pseudo element，而不是修改原始元素的高度，但这可能是您在不更改html的情况下最接近的。

Answer 3

您可以添加内联块伪元素：

.inlineblock::after {
  content: '';
  display: inline-block;
}

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

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

或者，您可以插入普通空格并使用white-space来防止其崩溃：

.inlineblock::after {
  content: ' ';
  white-space: pre-wrap; /* or pre */
}

.inlineblock {
  display: inline-block;
  border: 2px solid #FF0000;
}
.inlineblock:after {
  content: ' ';
  white-space: pre-wrap;
}

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

或插入zero-width space

.inlineblock::after {
  content: ''; /* or \00200B */
}

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

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

如何给空/空格内联块元素赋予其容器高度？

3 个答案: