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

Question

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

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

Answer 1

你的描述应该是有点儿问题的，以上代码文本的实际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元素的行高一致就可以了。

Answer 2

优先级，指定的高于继承的。。。。
如果你不指定span元素的line-height，那他的line-height就是5，你指定了他为3，那他肯定就是3= =
而且，你的问题描述也有问题吧
“ 相应的设置无法覆盖父元素的设置”
你的设置是3，最后结果就是3，这说明你的设置覆盖了父元素的设置啊 o_0