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:

<!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;

Example:

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

Article Tags :

CSS

HTML

Web Technologies

CSS-Properties

HTML-Misc