Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set vertical space between the list of items using CSS?
In today’s era of web designing, the creation of visually attractive websites with proper layouts and organized content is the key task. One of the most commonly faced challenges is that the developers need to know how to properly define the space between the elements so as to increase the readability of the webpage.
Here, we have CSS for the rescue. CSS enables the developers to control the appearance of HTML elements, including proper spacing between them. In this article, we will discuss different methods used for setting the vertical space between the list of items using CSS.
We can create various types of lists in HTML. These are unordered, ordered and descriptive lists. We have a default value for the vertical space between the list of items. However, you can change the space accordingly by using any of the following methods mentioned below.
Using Margin-bottom
The most common method to add create a space between the items of a list is to add the bottom margin to all the list items.
Syntax
Following is the syntax −
ul li{
margin-bottom: value;
}
Example
Here, we have created two lists- one has the default value for the vertical space between the items while the other has increased vertical space.
<html>
<head>
<style>
h2 {
color: orange;
text-decoration: underline;
margin: 10px;
}
h3 {
color: red;
}
.demo li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2> List of items </h2>
<ul>
<h3>List with default vertical space between its items.</h3>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ul>
<ul class="demo">
<h3>List with increased vertical space between its items.</h3>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ul>
</body>
</html>
Using Padding
We can also add padding instead of margin to create a space between the list of items.
Example
In this example, we have used both padding-top and padding-bottom for two lists with same value of 15px. As we can see same vertical spaces are created for the two lists.
<html>
<head>
<style>
h2{
color: orange;
text-decoration: underline;
margin: 10px;
}
h3{
color: red;
}
.demo li {
padding-bottom: 15px;
}
ul li{
padding-top: 15px;
}
</style>
</head>
<body>
<h2> List of food items </h2>
<ul>
<h3> The following list has increased vertical space by using padding-top property. </h3>
<li> Apples </li>
<li> Mango </li>
<li> Banana </li>
<li> Orange </li>
</ul>
<ul class= "demo">
<h3> The following list has increased vertical space by using padding-bottom property. </h3>
<li> Guava </li>
<li> Pine apple </li>
<li> Strawberries </li>
<li> Watermelon </li>
</ul>
</body>
</html>
Using Line-height
Another way to increase the space between the items of a list is to adjust the line height using the line-height property.
Syntax
ol li{
line-height: value;
}
Example
This example, is used to increase the height of each line within the list which creates a space between them.
<html>
<head>
<style>
h2 {
color: orange;
letter-spacing: 1px;
margin: 10px;
}
h3 {
color: red;
}
ol li {
line-height: 1.8;
}
</style>
</head>
<body>
<h2> line-height method </h2>
<ol>
<h3> List of programming languages which are popularly used in modern days. </h3>
<li> JavaScript, TypeScript, React </li>
<li> Python, MongoDB </li>
<li> C/C++ </li>
<li> Java, SQL </li>
</ol>
</body>
</html>
Using CSS Flexbox
We can use the flexbox layout for our list. Here, we need to use the justify-content property to create space in between the list items.
Example
Here, we have converted the <ol> element into a flex container and assigned its desired height of 120px. Then, we have used justify-content: space-between to create space. The available space (which is 120px) is evenly distributed among all the list items. This gives them increased vertical space.
<html>
<head>
<style>
h2{
color: orange;
letter-spacing: 1px;
margin: 10px;
}
h3{
margin: 15px;
color: red;
}
ol {
height: 120px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
</head>
<body>
<h2> Using Flexbox </h2>
<h3> List of programming languages which are popularly used in modern days. </h3>
<ol>
<li> JavaScript, TypeScript, React </li>
<li> Python, MongoDB </li>
<li> C/C++ </li>
<li> Java, SQL </li>
</ol>
</body>
</html>
Using CSS Grids
We can use the grid layout for our list. In CSS Grids the grid-gap property to create space in between the list items.
Example
Let us see an example for this −
<html>
<head>
<style>
dt{
font-weight: bold;
}
dd{
margin-bottom: 15px;
}
dl{
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
}
</style>
</head>
<body>
<dl>
<dt> HTML </dt>
<dd> Hyper Text Markup Language (HTML) is the standard markup language which enables developers to create web pages. </dd>
<dt> CSS </dt>
<dd> Cascading Style Sheets is a stylesheet language which is used for applying styles to the HTML elements. </dd>
<dt> JavaScript </dt>
<dd> JavaScript is a high-level, scripting programming language which helps us in creating interactive web pages and web applications. </dd>
</dl>
</body>
</html>
Conclusion
In this article, we have discussed different methods in CSS for setting the vertical space between the list of items. These methods are margin-bottom, padding-top and padding-bottom, line-height, flexbox and grid. As we have already seen proper spacing between the elements enhances the visual appearance of any website. However, it is always necessary to examine and adjust the spacing according to different screen size and devices. This will make your website responsive.
4K+ Views
