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

HTML Web Development Front End Technology

We use CSS padding-left property, to create a space between bullets and the text. It is used to set the padding area on the left of an element.

HTML support ordered list, unordered list and HTML support ordered list, unordered list and we must use the <ul> tag, to create unordered list in HTML. The <ul> tag defines the unordered list. We use <li> tag to start list of items.

And for ordered list we must use the <ol> tag, to create unordered list in HTML. The <ol> tag defines the ordered list. We use <li> tag to start list of items.

Syntax

Following is the syntax to create space between list bullets and the text in HTML.

padding-left: value in pixels;

Example 1

Following is the example to create space between list bullets and the text in HTML.


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <ul >
      <li style="padding-left: 30px">Abdul</li>
      <li style="padding-left: 30px">Jason</li>
      <li style="padding-left: 30px">Yadav</li>
   </ul>
</body>
</html>

Following is the output for the above example program.

Example 2

Another example to create space between list bullets and text in HTML −


<!DOCTYPE html>
<html>
<head>
   <title>HTML Lists</title>
</head>
<body>
   <h1>Developed Countries</h1>
   <p>The list of developed countries:</p>
   <ul style="list-style-type:disc">
      <li style="padding-left:1em">US</li>
      <li>Australia</li>
      <li>New Zealand</li>
   </ul>
</body>
</html>