Why does line-height behave strange with universal selector?

user_18464937 0
Viewed 38

As I know in css we set line-height as integer because if we change font size in child elements then it recalculate appropriate value. This works fine except with universal selector because if I set line-height:1.5em in universal selector it does not create overlap. However, if I set line-height:1.5em in div it creates overlap.

 *    {    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>

font-size css-selectors css
1 Answers

There is nothing wrong with universal selector. The reason that that first example works because universal selector specify div and span both of them line heightto 1.5 em of its orignial line-height.

You specify the line-height for span here

For example two, you doesn't specify the line-height for span, so its line-height property will inherted from its parent container which is div (24 px line height)

Note that line-height is 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>

user_177436470
Related