How to create space between list bullets and text in HTML ?
The approach of this article is to create a space between bullets and the text using CSS. This task can be done by using the CSS padding-left property. It is used to set the width of the padding area on the left of an element.
Syntax:
padding-left: length|percentage|initial|inherit;
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< style >
li {
padding-left: 23px;
}
</ style >
</ head >
< body >
< h1 style="color:green;
text-align:center">
GeeksforGeeks
</ h1 >
< h2 style = "text-align:center" >
How to create space between
list bullets and text in HTML?
</ h2 >
< p >< b >list of fruits</ b ></ p >
< ul >
< li >Mango</ li >
< li >Apple</ li >
< li >Banana</ li >
< li >Grapes</ li >
< li >Potatto</ li >
</ ul >
</ body >
</ html >
|
Output:
Supported Browsers are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera
Last Updated :
23 Dec, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...