CSS |行高属性

原文:https://www.geeksforgeeks.org/css-line-height-property/

CSS 中的行高属性用于设置用于行的空间量,例如在文本中。不允许负值。

语法:

line-height: normal|number|length|percentage|initial|inherit;

属性值:

  • normal: This mode represents the normal line height. This is the default value.

    ```html line-height: normal;

    ```

    示例:

    ```html <!DOCTYPE html>     

            CSS line-height Property                      .geek {               line-height: normal;               background: green;               color: white;             }                            

                GeeksforGeeks         

                CSS line-height Property         

                A computer science portal for geeks.
                This div has line-height: normal;         
         ```

    输出: lineheight

  • number: This value is a unitless number multiplied with the current font-size to set the line height. In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.

    ```html line-height: number;

    ```

    示例:

    ```html <!DOCTYPE html>     

            CSS line-height Property                      .geek {               line-height: 2.5;               background: green;               color: white;             }                            

                GeeksforGeeks         

                CSS line-height Property         

                A computer science portal for geeks.
                This div has line-height: 2.5;         
         ```

    输出: lineheight

  • length: In this mode a fixed line height is specified.

    ```html line-height: length;

    ```

    示例:

    ```html <!DOCTYPE html>     

            CSS line-height Property                      .geek {               line-height: 2em;               background: green;               color: white;             }                            

                GeeksforGeeks         

                CSS line-height Property         

                A computer science portal for geeks.
                This div has line-height: 2em;         
         ```

    输出: lineheight

  • percentage: This mode is used to set line height in percent of the current font size.

    ```html line-height: percentage;

    ```

    例:

    ```html <!DOCTYPE html>     

            CSS line-height Property                      .geek {               line-height: 150%;               background: green;               color: white;             }                            

                GeeksforGeeks         

                CSS line-height Property         

                A computer science portal for geeks.
                This div has line-height: 150%;         
         ```

    输出: lineheight

  • 初始:该模式用于将该属性设置为默认值。 语法:

    ```html line-height: initial;

    ```

支持的浏览器:行高属性支持的浏览器如下:

  • 谷歌 Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 7.0
  • 苹果 Safari 1.0