如何使用 CSS 以百分比为单位设置行高？

在本文中，我们将学习如何使用 CSS 以百分比形式设置行高。行高是 CSS 的一个属性，用于在每个元素之后提供高度。

方法：我们将使用CSS 中的 line-height属性并使用百分比设置值。百分比设置与元素字体大小相关的行高。设置的最终值是通过将元素的计算字体大小与给定的百分比值相乘来确定的。

句法：

line-height: percent

例1：本例中使用不同的行高百分比值，字体大小相同。

HTML

  

    

  

  
    

        GeeksForGeeks
    
  
    
line-height: 50%:
    

        This is a paragraph with a
        lower line-height.

        The line height is here set to 50%.
    
  
    
line-height: 100%:
    

        This is a paragraph with a
        higher line-height.
The 
        line height is here set to 100%.
    

  

输出：

例2：在本例中，相同的行高百分比值用于不同的字体大小。

HTML

  

    

  

  
    

        GeeksForGeeks
    
  
    

        line-height: 125%,
        font-size: 24px
    
    

        This is a paragraph with the same 
        line-height but lower font-size.
        
The line height is here set 
        to 125% and font-size is 24px.
    
  
    
line-height: 125%,
        font-size: 48px
    

        This is a paragraph with the same 
        line-height but higher font-size.
        
The line height is here set to 
        125% and font-size is 48px.
    

  

输出：