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

HTML Web Development Front End Technology

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.

Example

We have the following unordered list with disc bullets

Live Demo

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

Live Demo

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

Johar Ali

Published on 01-Feb-2018 07:38:16

Previous Page Print Page