Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 02 Mar, 2020

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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




    <!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>
  • 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:




    <!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>
  • 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.

  • Syntax:
    For padding-top
    padding-top: length|initial|inherit;
    For padding-bottom
    padding-bottom: length|initial|inherit;
  • Example:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0">
        <title>
            Using padding-top and padding-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) {
                padding-top: 1.0em;
            }
      
            li:not(:last-of-type) {
                padding-bottom: 1.0em;
            }
        </style>
      
    </head>
      
    <body>
        <div class="container">
            <h1>GeeksforGeeks</h1>
            <h4>
                Using padding-top and padding-bottom
                to set line height
            </h4>
            <br><br>
            <div class="left">
                <b>padding-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>padding-bottom property effect</b><br>
                <ul>
                    <li>For Geeks</li>
                    <li>GeeksforGeeks</li>
                    <li>A Computer Science Poratal</li>
                </ul>
            </div>
        </div>
    </body>
      
    </html>
  • Output:

      Note: Vertical spaces will be different in all the methods.




      My Personal Notes arrow_drop_up
Recommended Articles
Page :