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
Similar Reads
How to prevent line breaks in the list of items using CSS?
The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items. Syntax: element
1 min read
How to increase the space between dotted border dots using CSS?
In CSS, increasing the space between the dots in a dotted border means adjusting the distance between each dot that makes up the border. This can be done by modifying certain CSS properties, allowing developers to control the appearance and spacing for a more customized design. Using linear-gradient
2 min read
How to add lines besides a vertical text using SASS ?
In this article, we will see how to add lines besides some vertical text using SASS. Approach: The HTML code is used to depict the basic structure of the body. Here, we define a division element with a class of wrapper to contain subsequent division elements. Another division element with a class of
6 min read
Space between two rows in a table using CSS
The space between two rows in a table can be done using CSS border-spacing and border-collapse properties. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of the table is collapsed or not. The border-sp
2 min read
How to create Vertical Menu using HTML and CSS ?
In This article, we will learn how to create vertical menus by using HTML and CSS. Vertical Menu: We can create a vertical menu in the form of buttons and a scrollable menu. Vertical Menu is the buttons arranged in the vertical menu bar/navbar. How to create a vertical menu using buttons: We can cre
2 min read
How to Insert Spaces/Tabs in Text using HTML and CSS?
When building web pages, controlling the spacing between elements and text is essential for creating visually appealing and well-structured content. HTML and CSS offer several ways to insert spaces and tabs in text. While HTML provides basic methods for adding spaces, CSS gives more control over lay
4 min read
How to Vertically Align Text Next to an Image using CSS ?
Adding images into our websites is a common practice, and there are situations where text must be vertically aligned alongside an image. For example, a user’s name should appear immediately next to their profile picture, vertically aligned for optimal readability . In this article, we will see how t
2 min read
How to set the size of specific flex-item using CSS?
To set the size of a specific flex item using CSS, you can use the flex property. This property allows you to specify the initial size, grow factor, and shrink factor of the item, controlling its behavior within the flex container. Flex follows pre-defined properties to change the size of the flex i
3 min read
How to Add Horizontal & Vertical Space Between Elements in Tailwind CSS ?
Tailwind CSS simplifies web design with its utility-first approach. Creating websites that look good is important in web development. Tailwind CSS is a tool that helps make this easier. One important thing to learn is how to put space between elements. Below are the approaches to Add Horizontal
3 min read
How to create Vertical Navigation Bar using HTML and CSS ?
After reading this article, you will be able to build your own vertical navigation bar. To follow this article you only need some basic understanding of HTML and CSS. Let us start writing our vertical navigation bar, first, we will write the structure of the navigation bar. In this tutorial, we crea
3 min read