How to set vertical space between the list of items using CSS ?
Last Updated :
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.
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.
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...