How to Set Vertical Space Between the List of Items using CSS?
Last Updated :
15 Oct, 2024
Vertical space refers to the distance between elements arranged vertically on a webpage. In CSS, it can be set between list items using properties like margin or padding etc. These properties help create a visually appealing layout, enhancing readability and organization of the content.
Below are the approaches to set vertical space between the list of items using CSS:
Using CSS line-height Property
The line-height property in CSS controls the vertical spacing between lines of text or list items. By increasing the line-height value, you create more space between the lines or items.
Syntax
line-height: normal | number | length | percentage | initial | inherit;
Example: This example shows the use of the inline-height property to set vertical space between the list of items.
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>Code World</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:
Using CSS margin-top Property
The margin-top property in CSS is used to create space above an element. It helps you control the positioning of elements on your webpage, allowing for better layout and spacing.
Note: You can also use only the 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: This example shows the use of the margin-top property to set vertical space between the list of items.
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>Code World</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>Geeks</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>Geeks</li>
<li>A Computer Science Poratal</li>
</ul>
</div>
</div>
</body>
</html>
Output:
Using CSS padding-top Property
The padding-top property in CSS adds space inside the top edge of an element. By applying it to list items or other elements, you increase the vertical space between items, pushing content down without affecting external element spacing.
Syntax
// For padding-top
padding-top: length | initial | inherit;
// For padding-bottom
padding-bottom: length | initial | inherit;
Example: This example shows the use of padding-top property to set vertical space between the list of items.
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:
Output