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

11 May, 2022
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;
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>
<!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;

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>
<!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;
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>
<!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.
sumitgumber28
CSS-Properties
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)