入门 CSS 排版行高样式

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）基础的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

在本文中，我们将了解 Primer CSS Typography Line Height 样式。 Line Height Styles 设置线框的高度。它通常用于设置文本行之间的距离。

入门 CSS 排版行高类：

• lh-default：该类用于设置行间距为1.5
• lh-condensed：该类用于设置线间距为1.25。
• lh-condensed-ultra：该类用于设置行间距为1。

响应式变体类：

• lh-sm-condensed：该类用于在小屏幕上设置行间距为1.25。
• lh-md-condensed：该类用于在中等屏幕上将行间距设置为 1.25。
• lh-lg-condensed：该类用于在大屏幕上设置行间距为1.25。
• lh-xl-condensed：该类用于在超大屏幕上设置行间距为1.25。

句法：

       ...

同样，所有类都有其响应变体，具体取决于屏幕尺寸。

注意：我们可以使用类lh-0 将 line-height 设置为 0。

示例 1：在此示例中，我们将了解不同的 line-height 类，即lh-default 、 lh-condensed和lh-condensed-ultra 。

HTML

 

    
 
    

 

    

        GeeksforGeeks
    
     
    
Typography Line Height
 
    
lh-default
 
    

        GeeksforGeeks is a computer science portal.
        It provides trainings in wide variety of
        courses like C++, Java, CSS, HTML, Bootstrap.
        It also facilitates training in Blockchain,
        Full Stack Development, and other courses
        that are currently required to by the
        student to build their concepts. GeeksforGeeks
        also helps students to secure a job. They
        conduct various technical sessions of Data
        structures and other modules like operating
        system.
    
 
 
    
lh-condensed
    

        GeeksforGeeks is a computer science portal.
        It provides trainings in wide variety of
        courses like C++, Java, CSS, HTML, Bootstrap.
        It also facilitates training in Blockchain,
        Full Stack Development, and other courses
        that are currently required to by the
        student to build their concepts. GeeksforGeeks
        also helps students to secure a job. They
        conduct various technical sessions of Data
        structures and other modules like operating
        system.
    
 
 
 
    
lh-condensed-ultra
    

        GeeksforGeeks is a computer science portal.
        It provides trainings in wide variety of
        courses like C++, Java, CSS, HTML, Bootstrap.
        It also facilitates training in Blockchain,
        Full Stack Development, and other courses
        that are currently required to by the
        student to build their concepts. GeeksforGeeks
        also helps students to secure a job. They
        conduct various technical sessions of Data
        structures and other modules like operating
        system.
    
 
 

 

输出：

示例 2：在此示例中，我们将使用lh-0 将 line-height 设置为 0 班级。

HTML

 

    
 
     

 

    

        GeeksforGeeks
    
     
    
 Typography Line Height
     
    
lh-0
 
    
       
        GeeksforGeeks is a computer science portal.
        It provides trainings in wide variety of
        courses like C++, Java, CSS, HTML, Bootstrap.
        It also facilitates training in Blockchain,
        Full Stack Development, and other courses
        that are currently required to by the
        student to build their concepts. GeeksforGeeks
        also helps students to secure a job. They
        conduct various technical sessions of Data
        structures and other modules like operating
        system
    
 
  

 

输出：

参考： https://primer.style/css/utilities/typography#line-height-styles