Skip to content
Related Articles

Related Articles

Improve Article
CSS | line-height Property
  • Last Updated : 09 Aug, 2019

The line-height property in CSS is used to set the amount of space used for lines, such as in the text. Negative values are not allowed.

Syntax:

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

Property values:

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

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS line-height Property</title>
            <style>
                .geek {
                  line-height: normal;
                  background: green;
                  color: white;
                }
            </style>
        </head>
        <body style = "text-align:center;">
            <h1 style = "color:green;">
                GeeksforGeeks
            </h1>
              
            <h2>
                CSS line-height Property
            </h2>
              
            <div class="geek">
                A computer science portal for geeks.<br>
                This div has line-height: normal;
            </div>
        </body>
    </html>

    Output:
    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.
    line-height: number;
    

    Example:






    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS line-height Property</title>
            <style>
                .geek {
                  line-height: 2.5;
                  background: green;
                  color: white;
                }
            </style>
        </head>
        <body style = "text-align:center;">
            <h1 style = "color:green;">
                GeeksforGeeks
            </h1>
              
            <h2>
                CSS line-height Property
            </h2>
              
            <div class="geek">
                A computer science portal for geeks.<br>
                This div has line-height: 2.5;
            </div>
        </body>
    </html>

    Output:
    lineheight

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

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS line-height Property</title>
            <style>
                .geek {
                  line-height: 2em;
                  background: green;
                  color: white;
                }
            </style>
        </head>
        <body style = "text-align:center;">
            <h1 style = "color:green;">
                GeeksforGeeks
            </h1>
              
            <h2>
                CSS line-height Property
            </h2>
              
            <div class="geek">
                A computer science portal for geeks.<br>
                This div has line-height: 2em;
            </div>
        </body>
    </html>

    Output:
    lineheight

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

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS line-height Property</title>
            <style>
                .geek {
                  line-height: 150%;
                  background: green;
                  color: white;
                }
            </style>
        </head>
        <body style = "text-align:center;">
            <h1 style = "color:green;">
                GeeksforGeeks
            </h1>
              
            <h2>
                CSS line-height Property
            </h2>
              
            <div class="geek">
                A computer science portal for geeks.<br>
                This div has line-height: 150%;
            </div>
        </body>
    </html>

    Output:
    lineheight

  • initial: This mode is used to set this property to its default value.
    Syntax:
    line-height: initial;
    

Supported Browsers: The browser supported by line-height property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 7.0
  • Apple Safari 1.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :