The difference between css line-height value of 150% or 1.5

The followingcss column will introduce to you the difference between line-height:150% and line-height:1.5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

(Recommended tutorial: CSS video tutorial)

This is a small casual question, but it is Often mentioned by some interviewers. Generally, you will enter a state of confusion all of a sudden, so let us see what is the difference?

I will create a new html first, the code is as follows:

<p style="line-height:150%;font-size:16px;">
  　　　　　　　　 父元素内容
  　　　　　　　　
  <p style="font-size:30px;">
    　　　　　　　　Web前端开发<br/>
    　　　　 　　　line-height行高问题
    　　　　　　　　
  </p>
</p>

The picture below is the effect when line-height:150%, when the line height of the parent element is 150%, it will be based on the parent element. Font size is calculated first and then inherited by child elements. So when line-height:150%, the line height of the word element is equal to 16px * 150% = 24px:

The picture below is when For the effect of line-height:1.5em, when the line height of the parent element is 150%, the line height value will be calculated based on the font size of the parent element and then the child element will inherit it. So when line-height:1.5em, the line height of the child element is equal to 16px * 1.5em = 24px:

The picture below is when For the effect of line-height:1.5, when the parent element's line height is 1.5, the line height value will be dynamically calculated based on the font size of the child element for the child element to inherit. Therefore, when line-height:1.5, the line height of the child element is equal to 30px * 1.5 = 45px:

More programming related knowledge, Please visit: Programming Learning Website! !

The above is the detailed content of The difference between css line-height value of 150% or 1.5. For more information, please follow other related articles on the PHP Chinese website!