Computer >> Computer tutorials >  >> Programming >> HTML

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


To create space between list bullets and text in HTML, use CSS padding property. Left padding padding-left is to be added to <ul> tag list item i.e. <li> tag. Through this, padding gets added, which will create space between list bullets and text in HTML.
How to create space between list bullets and text in HTML?

Example

We have the following unordered list with disc bullets

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

Example

You can try to run the following code to add space between list bullets and text in HTML. We are using the same code above and will add left padding to it for spacing

<!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>