How to set vertical space between the list of items using CSS ?
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;
- 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
>w3wiki</
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 Beginner</
li
>
<
li
>w3wiki</
li
>
<
li
>A Computer Science Poratal</
li
>
</
ul
>
</
div
>
<
div
class
=
"right"
>
<
b
>No line-height property effect</
b
><
br
>
<
ul
>
<
li
>For Beginner</
li
>
<
li
>w3wiki</
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;
- 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
>w3wiki</
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 Beginner</
li
>
<
li
>w3wiki</
li
>
<
li
>A Computer Science Poratal</
li
>
</
ul
>
</
div
>
<
div
class
=
"right"
>
<
b
>margin-bottom property effect</
b
><
br
>
<
ul
>
<
li
>For Beginner</
li
>
<
li
>w3wiki</
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;
- 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
>w3wiki</
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 Beginner</
li
>
<
li
>w3wiki</
li
>
<
li
>A Computer Science Poratal</
li
>
</
ul
>
</
div
>
<
div
class
=
"right"
>
<
b
>padding-bottom property effect</
b
><
br
>
<
ul
>
<
li
>For Beginner</
li
>
<
li
>w3wiki</
li
>
<
li
>A Computer Science Poratal</
li
>
</
ul
>
</
div
>
</
div
>
</
body
>
</
html
>
- Output:
Note: Vertical spaces will be different in all the methods.