Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 23 Dec, 2020

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!