Open In App

How to create space between list bullets and text in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

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>
  
    <!-- padding-left property used here -->
    <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
Previous
Next
Share your thoughts in the comments
Similar Reads