为什么 line-height 与通用选择器的行为很奇怪？

Question

据我所知，在 css 中我们将 line-height 设置为整数，因为如果我们更改子元素中的字体大小，它会重新计算适当的值。除了通用选择器外，这工作正常，因为如果我在通用选择器中设置 line-height:1.5em，它不会产生重叠。但是，如果我在 div 中设置 line-height:1.5em，它会产生重叠。

 *    {    line-height: 1.5em;       }

div  {   }

span {  font-size:4em;    }

<div>ghghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhhghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>   <span>start hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhofhfh<br>fhfhfhfhfhfhfhfhfhfhfhfhfhfhfgfgdfggdfgdfsgdfgdsfhjjghjhjfghjhfgjh end</span><br>.fhhhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhjhjjghjghjhgjhgjghhfhhh</div>

 *    {           }

div  {  line-height:1.5em;  }

span {  font-size:4em;    }

<div>ghghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhhghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>   <span>start  span overlap line-height:1.5em; inside parent hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhofhfh<br>fhfhfhfhfhfhfhfhfhfhfhfhfhfhfgfgdfggdfgdfsgdfgdsfhjjghjhjfghjhfgjh end</span><br>.fhhhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhjhjjghjghjhgjhgjghhfhhh</div>

Answer 1

通用选择器没有问题。第一个示例之所以有效，是因为通用选择器将 div 和 span 都指定为 line height 到其原始 line-height.

的 1.5 em

您在此处指定 line-height 跨度

例如二，你没有为跨度指定line-height，所以它的line-height 属性将从它的父容器继承，即div (24 px行高)

请注意 line-height 是 inherted。

console.log(window.getComputedStyle(document.querySelector('span')).lineHeight)
console.log(window.getComputedStyle(document.querySelector('div')).lineHeight)

*    {           }

div  {  line-height:1.5em;  }

span {  font-size:4em; 
}

<div>ghghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhhghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>   <span>start  span overlap line-height:1.5em; inside parent hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhofhfh<br>fhfhfhfhfhfhfhfhfhfhfhfhfhfhfgfgdfggdfgdfsgdfgdsfhjjghjhjfghjhfgjh end</span><br>.fhhhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhjhjjghjghjhgjhgjghhfhhh</div>

为什么 line-height 与通用选择器的行为很奇怪？

Why does line-height behave strange with universal selector?

css

css-selectors

font-size