Css 如何为空/空白内联块元素指定其容器行高度的高度?

Css 如何为空/空白内联块元素指定其容器行高度的高度?,css,Css,内联块元素默认为其容器行高度的高度-当它们包含内容时。我发现空的和只有空格的内联块元素默认为高度:0这是在Firefox上 有没有一种方法可以使空的内联块元素获得与包含文本的内联块元素相同的容器行高度 硬编码高度不是一个选项,添加随机HTML也不会使元素不为空。我一直在寻找复制品,但很惊讶没有找到 例如,在本演示中,我希望规则空间周围的第一个跨距显示a周围的第二个跨距的显示方式: .inlineblock{ 显示:内联块; 边框:2个实心FF0000; } 知识是一种美德,是一种美德,是一种美

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

有没有一种方法可以使空的内联块元素获得与包含文本的内联块元素相同的容器行高度

硬编码高度不是一个选项,添加随机HTML也不会使元素不为空。我一直在寻找复制品,但很惊讶没有找到

例如,在本演示中,我希望规则空间周围的第一个跨距显示a周围的第二个跨距的显示方式:

.inlineblock{ 显示:内联块; 边框:2个实心FF0000; }
知识是一种美德,是一种美德,是一种美德,是一种美德。但是,在最低限度上,我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔的不自以为是之外,不能因为工作上的过失而让它成为可能,并且不依赖于行高、字体大小或任何其他css属性的设置,但这是一个相当粗糙的解决方案

.inlineblock{ 显示:内联块; } .inlineblock::之后{ 显示:内联块; 内容:\007C\00a0\00a0; 边框:2个实心FF0000; }
Lorem ipsum dolor sit amet,神圣的教士精英,在劳动和生活中暂时占有一席之地。但是,在最低限度上,我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除非是出于非故意的原因,否则不可将mollit anim id est Labourm的罪过排除在外您可以添加一个内联块伪元素:

.inlineblock::之后{ 内容:; 显示:内联块; } .inlineblock{ 显示:内联块; 边框:2个实心FF0000; } .inlineblock:之后{ 内容:; 显示:内联块; }
知识是一种美德,是一种美德,是一种美德,是一种美德。但是,在最低限度上,我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。如@Douglas所评论和证明的那样,除了圣奥卡塔·丘比特(sint occaat Cupidat)不冒失外,还必须在工作中承担责任,否则,如果你想避免内容,请使用1米的高度。em将相对于父级,因此将与父级的字体大小进行良好的缩放

根据此处的ref:

…字体相对长度指的是屏幕上元素的字体度量 它们被使用。例外情况是它们出现在的值中 “字体大小”属性本身,在这种情况下,它们引用 父元素的计算字体度量

在您的例子中,跨距没有明确定义的字体大小,因此它们从父级继承。1em的高度现在将相对于其自身继承的字体大小

出现问题的原因是,空内联块的处理方式与内联相同。没有填充,也没有设置字体大小和行高的内容。因此,它们只是在缺乏宽度和高度的情况下坍塌。给它一个1米的高度,如果需要,给它一些填充,并给它一个垂直对齐

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

示例代码段:

p:类型{font size:11px;}的第一个 .inlineblock{ 显示:内联块; 边框:2px实心f00; 垂直对齐:中间对齐; 衬垫:2件;高度:1米; } Lorem ipsum dolor sit amet,神圣的教士精英,在劳动和生活中暂时占有一席之地。但是,在最低限度上,我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎,还必须为动物的劳动负责


Lorem ipsum dolor sit amet,神圣的教士精英,在劳动和生活中暂时占有一席之地。但是,在最低限度上,我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔不自卑,不能因为工作的过失而去追求动物的劳动

只是为了确定我的理解,硬编码不是一个选项,你的意思是你不能增加高度
1米到跨度,这使得它与默认字符高度相同?因为它确实有效:@Douglas,但当字体大小被明确设置时,它不起作用:。啊,好的,很好的观点@cdMinix@Douglas这是对的。即使父级的字体大小不同,只要高度设置为1em,它也能很好地工作。出现此问题的原因是,空内联块的处理方式与内联相同。没有填充和字符来设置字体大小和行高。因此,它们只是在缺乏宽度和高度的情况下坍塌。给它一个1米的高度,给它一些填充,并给它一个垂直对齐。请看这里:有价值的解释,谢谢。我试图找到一个依赖高度的例子:1米;虽然有冲突,但它确实看起来相当强大。一个轻微的建议修正:垂直对齐:顶部;与“垂直对齐:中间”相比,似乎更接近包含内容的内联块的默认行为;-@user568458:中间将没有问题,并且将整齐地对齐。您也可以使用底部。只要选择最适合你的就行了。这假设线条高度:1。初始行高度取决于实现,但规范建议值介于1和1之间。2@Oriol:嗯。。是的,我同意。我现在在手机上,无法检查。但是,对于Op的用例,这应该在这些限制范围内工作良好,除非它设置得太高或太低。