css - 子元素line-height无法覆盖比自己大的父元素

问题描述

问 题

<p style="line-height: 5"><span style="line-height: 3">aaaa</span></p>

当子元素span设置的line-height比父元素p小时， 相应的设置无法覆盖父元素的设置，比如以上代码文本的实际line-height为5，这是什么原因呢？ 有没有解决办法？

解决方案

你的描述应该是有点儿问题的，以上代码文本的实际line-height是5，而不是3。
line-height定义的是行的最小高度，当行内包含行内元素的时候，每个行内元素会生成一个行内框，然后行内元素根据vertical-align属性对齐元素，然后取所有这些框的最高上边界和最低下边界，最高上边界和最低下边界之间的高度组成了实际的行高。
另外，除了这些实际存在的行内元素来说，还存在一个strut元素，这是一个假想的具有块元素的字号和行高的零宽元素，这个元素会参与最后实际的行高。

strut解释如下：

The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."

所以，在上面的例子中，span元素具有3的行高，假想元素strut具有和p元素一样的字号和行高5，然后这两个元素形成的行内块按照基线对齐的方式放置（vertical-align的默认值是baseline），然后取这两个行内块的最高上边界和最低下边界。因为假想元素strut的行高是5，比span的行高大，所以最后的行高就是5，而不是3。

把p元素上的行高设置去掉，或者设置成和span元素的行高一致就可以了。

这篇关于css - 子元素line-height无法覆盖比自己大的父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！