【发布时间】：2015-08-12 00:10:18
【问题描述】：
Inline-block 元素默认为其容器行高的高度 - 当它们有内容时。我发现空的和只有空格的内联块元素默认为 height:0 （这是在 Firefox 上）。
有没有一种方法可以使空的内联块元素的容器行高的高度与包含文本的内联块元素相同？
对高度进行硬编码不是一种选择，添加像  这样的随机 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;，垂直对齐，给它一个位置：相对段落和/或内联块容器然后@987654332 @，但没有成功。
.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>【问题讨论】：
-
只是为了确保我理解，通过“硬编码不是一个选项”，你的意思是你不能向跨度添加 1em 的高度（这使得它与默认字符高度相同） )?
-
因为它确实有效：jsfiddle.net/Doug021786/vjbaeu21
-
@Douglas 但是在明确设置字体大小时效果不佳：jsfiddle.net/wggpvb2g/1.
-
啊好吧，好点@cdMinix
-
@Douglas 是对的。只要高度设置为 1em，即使父级的
font-size不同，它也能正常工作。这个问题的原因是空的inline-blocks 被当作内联处理。没有padding也没有字符来设置font-size和line-height。因此它们只是在没有width和height的情况下崩溃。给它一个height(1em)，给它一些padding，也给它一个vertical-align。见这里：jsfiddle.net/abhitalks/wggpvb2g/2
标签： css