How to set vertical space between the list of items using CSS ?

List of items in HTML can be of multiple type like ordered list, unordered list or could be description list. By default, there is a fixed vertical space between the list of items. We can increase or decrease the vertical spacing of the list of items by using different CSS properties. In this article, we will cover all the possible ways to set the vertical space between the list of items.

CSS line-height Property: In this method, we will set the line-height of list items which will ultimately increases or decrease the vertical spacing of list items.

  • Syntax:
    line-height: normal|number|length|percentage|initial|inherit;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0">
        <title>
            Using line-height to
            set line-height
        </title>
      
        <style>
            .container {
                width: 500px
            }
            h1 {
                color: green;
            }
            b {
                position: absolute;
                top: 20%;
            }
            .left ul {
      
                /* Increase line-height 
                   compare to default */
                line-height: 2.5em;
                float: left;
            }
            .right {
                float: right;
            }
        </style>
      
    </head>
      
    <body>
        <div class="container">
            <h1>GeeksforGeeks</h1>
            <h4>
                Using line-height property
                to set line height
            </h4>
            <br><br>
            <div class="left">
                <b>line-height property effect</b><br>
                <ul>
                    <li>For Geeks</li>
                    <li>GeeksforGeeks</li>
                    <li>A Computer Science Poratal</li>
                </ul>
            </div>
            <div class="right">
                <b>No line-height property effect</b><br>
                <ul>
                    <li>For Geeks</li>
                    <li>GeeksforGeeks</li>
                    <li>A Computer Science Poratal</li>
                </ul>
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

CSS margin-top Property: We will apply margin-top property that will set line-height of list items which will ultimately increases or decrease the vertical spacing of list items. The CSS margin-bottom property can also applicable.
Note: You can also use only CSS margin property.

  • Syntax:
    For margin-top
    margin-top: length|auto|initial|inherit|percentage;
    For margin-bottom
    margin-bottom: length|auto|initial|inherit|percentage;
    
  • Exapmle:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0">
        <title>
            Using margin-top and margin-bottom
            to set line height
        </title>
      
        <style>
            .container {
                width: 500px
            }
            h1 {
                color: green;
            }
            b {
                position: absolute;
                top: 20%;
            }
            .left  {
      
                float: left;
            }
            .right {
      
                float: right;
            }
      
            li:not(:first-of-type) {
                margin-top: 1.5em;
            }
      
            li:not(:last-of-type) {
                margin-bottom: 1.5em;
            }
        </style>
      
    </head>
      
    <body>
        <div class="container">
            <h1>GeeksforGeeks</h1>
            <h4>
                Using margin-top and margin-bottom
                to set line height
            </h4>
            <br><br>
            <div class="left">
                <b>margin-top property effect</b><br>
                <ul>
                    <li>For Geeks</li>
                    <li>GeeksforGeeks</li>
                    <li>A Computer Science Poratal</li>
                </ul>
            </div>
            <div class="right">
                <b>margin-bottom property effect</b><br>
                <ul>
                    <li>For Geeks</li>
                    <li>GeeksforGeeks</li>
                    <li>A Computer Science Poratal</li>
                </ul>
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

CSS padding-top Property: We will apply padding-top property that will set line-height of list items which will ultimately increase or decrease the vertical spacing of list items. The CSS padding-bottom property is also applicable.
Note: You can also use only CSS padding property.